formik

formik

Version 2.4.5
Published 7 months ago
583 kB
8 dependencies
Apache-2.0 license

Install

npm i formik

yarn add formik

pnpm add formik

Overview

Build forms in React, without the tears

Index

Variables

variable ErrorMessage

const ErrorMessage: any;

variable FastField

const FastField: any;

variable FieldArray

const FieldArray: any;

variable Form

const Form: React.ForwardRefExoticComponent<any>;

variable FormikConsumer

const FormikConsumer: React.Consumer<FormikContextType<any>>;

variable FormikContext

const FormikContext: React.Context<FormikContextType<any>>;

variable FormikProvider

const FormikProvider: React.Provider<FormikContextType<any>>;

Functions

function connect

connect: <OuterProps, Values = {}>(
    Comp: React.ComponentType<OuterProps & { formik: FormikContextType<Values> }>
) => React.FC<OuterProps> &
    hoistNonReactStatics.NonReactStatics<
        React.ComponentClass<
            OuterProps & { formik: FormikContextType<Values> },
            any
        >,
        {}
    >;

Connect any component to Formik context, and inject as a prop called formik;
Parameter Comp
React Component

function Field

Field: ({
    validate,
    name,
    render,
    children,
    as: is,
    component,
    className,
    ...props
}: FieldAttributes<any>) => any;

function Formik

Formik: <Values extends FormikValues = FormikValues, ExtraProps = {}>(
    props: FormikConfig<Values> & ExtraProps
) => React.JSX.Element;

function getActiveElement

getActiveElement: (doc?: Document) => Element | null;

Same as document.activeElement but wraps in a try-catch block. In IE it is not safe to call document.activeElement if there is nothing focused.
The activeElement will be null only if the document or document body is not yet defined.
Parameter doc
Defaults to current document. {Element | null}
See Also
- https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js

function getIn

getIn: (obj: any, key: string | string[], def?: any, p?: number) => any;

Deeply get a value from an object via its path.

function insert

insert: <T>(arrayLike: ArrayLike<T>, index: number, value: T) => unknown[];

function isEmptyArray

isEmptyArray: (value?: any) => boolean;

is the value an empty array?

function isEmptyChildren

isEmptyChildren: (children: any) => boolean;

Does a React component have exactly 0 children?

function isFunction

isFunction: (obj: any) => obj is Function;

is the given object a Function?

function isInputEvent

isInputEvent: (value: any) => value is React.SyntheticEvent<any, Event>;

is the given object/value a type of synthetic event?

function isInteger

isInteger: (obj: any) => boolean;

is the given object an integer?

function isNaN

isNaN: (obj: any) => boolean;

is the given object a NaN?

function isObject

isObject: (obj: any) => obj is Object;

is the given object an Object?

function isPromise

isPromise: (value: any) => value is PromiseLike<any>;

is the given object/value a promise?

function isString

isString: (obj: any) => obj is string;

is the given object a string?

function move

move: <T>(array: T[], from: number, to: number) => unknown[];

Some array helpers!

function prepareDataForValidation

prepareDataForValidation: <T extends FormikValues>(values: T) => FormikValues;

Recursively prepare values.

function replace

replace: <T>(arrayLike: ArrayLike<T>, index: number, value: T) => unknown[];

function setIn

setIn: (obj: any, path: string, value: any) => any;

Deeply set a value from in object via it's path. If the value at path has changed, return a shallow copy of obj with value set at path. If value has not changed, return the original obj.
Existing objects / arrays along path are also shallow copied. Sibling objects along path retain the same internal js reference. Since new objects / arrays are only created along path, we can test if anything changed in a nested structure by comparing the object's reference in the old and new object, similar to how russian doll cache invalidation works.
In earlier versions of this function, which used cloneDeep, there were issues whereby settings a nested value would mutate the parent instead of creating a new object. clone avoids that bug making a shallow copy of the objects along the update path so no object is mutated in place.
Before changing this function, please read through the following discussions.
See Also
- https://github.com/developit/linkstate
- https://github.com/jaredpalmer/formik/pull/123

function setNestedObjectValues

setNestedObjectValues: <T>(
    object: any,
    value: any,
    visited?: any,
    response?: any
) => T;

Recursively a set the same value for all keys and arrays nested object, cloning
Parameter object
Parameter value
Parameter visited
Parameter response

function swap

swap: <T>(arrayLike: ArrayLike<T>, indexA: number, indexB: number) => unknown[];

function useField

useField: <Val = any>(
    propsOrFieldName: string | FieldHookConfig<Val>
) => [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>];

function useFormik

useFormik: <Values extends FormikValues = FormikValues>({
    validateOnChange,
    validateOnBlur,
    validateOnMount,
    isInitialValid,
    enableReinitialize,
    onSubmit,
    ...rest
}: FormikConfig<Values>) => {
    initialValues: Values;
    initialErrors: FormikErrors<unknown>;
    initialTouched: FormikTouched<unknown>;
    initialStatus: any;
    handleBlur: {
        (e: React.FocusEvent<any, Element>): void;
        <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
    };
    handleChange: {
        (e: React.ChangeEvent<any>): void;
        <T_1 = any>(field: T_1): T_1 extends React.ChangeEvent<any>
            ? void
            : (e: string | React.ChangeEvent<any>) => void;
    };
    handleReset: (e: any) => void;
    handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
    resetForm: (nextState?: Partial<FormikState<Values>>) => void;
    setErrors: (errors: FormikErrors<Values>) => void;
    setFormikState: (
        stateOrCb:
            | FormikState<Values>
            | ((state: FormikState<Values>) => FormikState<Values>)
    ) => void;
    setFieldTouched: (
        field: string,
        touched?: boolean,
        shouldValidate?: boolean
    ) => Promise<FormikErrors<Values>> | Promise<void>;
    setFieldValue: (
        field: string,
        value: any,
        shouldValidate?: boolean
    ) => Promise<FormikErrors<Values>> | Promise<void>;
    setFieldError: (field: string, value: string | undefined) => void;
    setStatus: (status: any) => void;
    setSubmitting: (isSubmitting: boolean) => void;
    setTouched: (
        touched: FormikTouched<Values>,
        shouldValidate?: boolean
    ) => Promise<FormikErrors<Values>> | Promise<void>;
    setValues: (
        values: React.SetStateAction<Values>,
        shouldValidate?: boolean
    ) => Promise<FormikErrors<Values>> | Promise<void>;
    submitForm: () => Promise<any>;
    validateForm: (values?: Values) => Promise<FormikErrors<Values>>;
    validateField: (name: string) => Promise<void> | Promise<string | undefined>;
    isValid: boolean;
    dirty: boolean;
    unregisterField: (name: string) => void;
    registerField: (name: string, { validate }: any) => void;
    getFieldProps: (
        nameOrOptions: string | FieldConfig<any>
    ) => FieldInputProps<any>;
    getFieldMeta: (name: string) => FieldMetaProps<any>;
    getFieldHelpers: (name: string) => FieldHelperProps<any>;
    validateOnBlur: boolean;
    validateOnChange: boolean;
    validateOnMount: boolean;
    values: Values;
    errors: FormikErrors<Values>;
    touched: FormikTouched<Values>;
    isSubmitting: boolean;
    isValidating: boolean;
    status?: any;
    submitCount: number;
};

function useFormikContext

useFormikContext: <Values>() => FormikContextType<Values>;

function validateYupSchema

validateYupSchema: <T extends FormikValues>(
    values: T,
    schema: any,
    sync?: boolean,
    context?: any
) => Promise<Partial<T>>;

Validate a yup schema.

function withFormik

withFormik: <
    OuterProps extends object,
    Values extends FormikValues,
    Payload = Values
>({
    mapPropsToValues,
    ...config
}: WithFormikConfig<OuterProps, Values, Payload>) => ComponentDecorator<
    OuterProps,
    OuterProps & FormikProps<Values>
>;

A public higher-order component to access the imperative API

function yupToFormErrors

yupToFormErrors: <Values>(yupError: any) => FormikErrors<Values>;

Transform Yup ValidationError to a more usable object

Interfaces

interface ArrayHelpers

interface ArrayHelpers<T extends any[] = any[]> {}

property handleMove

handleMove: (from: number, to: number) => () => void;

Imperatively move an element in an array to another index

property handlePop

handlePop: () => () => void;

Curried fn to remove a value from the end of the array

property handleRemove

handleRemove: (index: number) => () => void;

Curried fn to remove an element at an index of an array

property handleSwap

handleSwap: (indexA: number, indexB: number) => () => void;

Curried fn to swap two values in an array

property move

move: (from: number, to: number) => void;

Imperatively move an element in an array to another index

property swap

swap: (indexA: number, indexB: number) => void;

Imperatively swap two values in an array

method handleInsert

handleInsert: <X = T[number]>(index: number, value: X) => () => void;

Curried fn to insert an element at a given index into the array

method handlePush

handlePush: <X = T[number]>(obj: X) => () => void;

Curried fn to add a value to the end of an array

method handleReplace

handleReplace: <X = T[number]>(index: number, value: X) => () => void;

Curried fn to replace an element at a given index into the array

method handleUnshift

handleUnshift: <X = T[number]>(value: X) => () => void;

Curried fn to add an element to the beginning of an array

method insert

insert: <X = T[number]>(index: number, value: X) => void;

Imperatively insert an element at a given index into the array

method pop

pop: <X = T[number]>() => X | undefined;

Imperatively remove and return value from the end of the array

method push

push: <X = T[number]>(obj: X) => void;

Imperatively add a value to the end of an array

method remove

remove: <X = T[number]>(index: number) => X | undefined;

Imperatively remove and element at an index of an array

method replace

replace: <X = T[number]>(index: number, value: X) => void;

Imperatively replace a value at an index of an array

method unshift

unshift: <X = T[number]>(value: X) => number;

Imperatively add an element to the beginning of an array and return its length

interface ComponentDecorator

interface ComponentDecorator<TOwnProps, TMergedProps> {}

call signature

(component: CompositeComponent<TMergedProps>): React.ComponentType<TOwnProps>;

interface ErrorMessageProps

interface ErrorMessageProps {}

property children

children?: (errorMessage: string) => React.ReactNode;

property className

className?: string;

property component

component?: string | React.ComponentType;

property id

id?: string;

property name

name: string;

property render

render?: (errorMessage: string) => React.ReactNode;

interface FastFieldProps

interface FastFieldProps<V = any> {}

property field

field: FieldInputProps<V>;

property form

form: FormikProps<V>;

property meta

meta: FieldMetaProps<V>;

interface FieldConfig

interface FieldConfig<V = any> {}

property as

as?:
    | React.ComponentType<FieldProps<V>['field']>
    | string
    | React.ComponentType
    | React.ForwardRefExoticComponent<any>;

Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.

property children

children?: ((props: FieldProps<V>) => React.ReactNode) | React.ReactNode;

Children render function <Field name>{props => ...})

property component

component?:
    | string
    | React.ComponentType<FieldProps<V>>
    | React.ComponentType
    | React.ForwardRefExoticComponent<any>;

Field component to render. Can either be a string like 'select' or a component.

property innerRef

innerRef?: (instance: any) => void;

Inner ref

property multiple

multiple?: boolean;

Used for 'select' and related input types.

property name

name: string;

Field name

property render

render?: (props: FieldProps<V>) => React.ReactNode;

Render prop (works like React router's <Route render={props =>} />)
Deprecated

property type

type?: string;

HTML input type

property validate

validate?: FieldValidator;

Validate a single field value independently

property value

value?: any;

Field value

interface FieldHelperProps

interface FieldHelperProps<Value> {}

Imperative handles to change a field's value, error and touched

property setError

setError: (value: string | undefined) => void;

Set the field's error value

property setTouched

setTouched: (
    value: boolean,
    shouldValidate?: boolean
) => Promise<void | FormikErrors<Value>>;

Set the field's touched value

property setValue

setValue: (
    value: Value,
    shouldValidate?: boolean
) => Promise<void | FormikErrors<Value>>;

Set the field's value

interface FieldInputProps

interface FieldInputProps<Value> {}

Field input value, name, and event handlers

property checked

checked?: boolean;

Is the field checked?

property multiple

multiple?: boolean;

Multiple select?

property name

name: string;

Name of the field

property onBlur

onBlur: FormikHandlers['handleBlur'];

Blur event handler

property onChange

onChange: FormikHandlers['handleChange'];

Change event handler

property value

value: Value;

Value of the field

interface FieldMetaProps

interface FieldMetaProps<Value> {}

Field metadata

property error

error?: string;

Error message of the field

property initialError

initialError?: string;

Initial error message of the field

property initialTouched

initialTouched: boolean;

Initial touched state of the field

property initialValue

initialValue?: Value;

Initial value of the field

property touched

touched: boolean;

Has the field been visited?

property value

value: Value;

Value of the field

interface FieldProps

interface FieldProps<V = any, FormValues = any> {}

property field

field: FieldInputProps<V>;

property form

form: FormikProps<FormValues>;

property meta

meta: FieldMetaProps<V>;

interface FormikComputedProps

interface FormikComputedProps<Values> {}

Formik computed properties. These are read-only.

property dirty

readonly dirty: boolean;

True if any input has been touched. False otherwise.

property initialErrors

readonly initialErrors: FormikErrors<Values>;

The initial errors of the form

property initialStatus

readonly initialStatus?: any;

The initial status of the form

property initialTouched

readonly initialTouched: FormikTouched<Values>;

The initial visited fields of the form

property initialValues

readonly initialValues: Values;

The initial values of the form

property isValid

readonly isValid: boolean;

True if state.errors is empty

interface FormikConfig

interface FormikConfig<Values> extends FormikSharedConfig {}

props

property children

children?: ((props: FormikProps<Values>) => React.ReactNode) | React.ReactNode;

React children or child render callback

property component

component?: React.ComponentType<FormikProps<Values>>;

Form component to render

property initialErrors

initialErrors?: FormikErrors<Values>;

Initial object map of field names to specific error for that field

property initialStatus

initialStatus?: any;

Initial status

property initialTouched

initialTouched?: FormikTouched<Values>;

Initial object map of field names to whether the field has been touched

property initialValues

initialValues: Values;

Initial values of the form

property innerRef

innerRef?: React.Ref<FormikProps<Values>>;

Inner ref

property onReset

onReset?: (values: Values, formikHelpers: FormikHelpers<Values>) => void;

Reset handler

property onSubmit

onSubmit: (
    values: Values,
    formikHelpers: FormikHelpers<Values>
) => void | Promise<any>;

Submission handler

property render

render?: (props: FormikProps<Values>) => React.ReactNode;

Render prop (works like React router's <Route render={props =>} />)
Deprecated

property validate

validate?: (values: Values) => void | object | Promise<FormikErrors<Values>>;

Validation function. Must return an error object or promise that throws an error object where that object keys map to corresponding value.

property validationSchema

validationSchema?: any | (() => any);

A Yup Schema or a function that returns a Yup schema

interface FormikHandlers

interface FormikHandlers {}

Formik form event handlers

property getFieldHelpers

getFieldHelpers: <Value = any>(name: string) => FieldHelperProps<Value>;

property getFieldMeta

getFieldMeta: <Value>(name: string) => FieldMetaProps<Value>;

property getFieldProps

getFieldProps: <Value = any>(
    props: string | FieldConfig<Value>
) => FieldInputProps<Value>;

property handleBlur

handleBlur: {
    /** Classic React blur handler, keyed by input name */
    (e: React.FocusEvent<any>): void;
    /** Preact-like linkState. Will return a handleBlur function. */
    <T = string | any>(fieldOrEvent: T): T extends string
        ? (e: any) => void
        : void;
};

property handleChange

handleChange: {
    /** Classic React change handler, keyed by input name */
    (e: React.ChangeEvent<any>): void;
    /** Preact-like linkState. Will return a handleChange function.  */
    <T = string | React.ChangeEvent<any>>(
        field: T
    ): T extends React.ChangeEvent<any>
        ? void
        : (e: string | React.ChangeEvent<any>) => void;
};

property handleReset

handleReset: (e?: React.SyntheticEvent<any>) => void;

Reset form event handler

property handleSubmit

handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;

Form submit handler

interface FormikHelpers

interface FormikHelpers<Values> {}

Formik state helpers

property resetForm

resetForm: (nextState?: Partial<FormikState<Values>>) => void;

Reset form

property setErrors

setErrors: (errors: FormikErrors<Values>) => void;

Manually set errors object

property setFieldError

setFieldError: (field: string, message: string | undefined) => void;

Set error message of a form field directly

property setFieldTouched

setFieldTouched: (
    field: string,
    isTouched?: boolean,
    shouldValidate?: boolean
) => Promise<void | FormikErrors<Values>>;

Set whether field has been touched directly

property setFieldValue

setFieldValue: (
    field: string,
    value: any,
    shouldValidate?: boolean
) => Promise<void | FormikErrors<Values>>;

Set value of form field directly

property setFormikState

setFormikState: (
    f:
        | FormikState<Values>
        | ((prevState: FormikState<Values>) => FormikState<Values>),
    cb?: () => void
) => void;

Set Formik state, careful!

property setStatus

setStatus: (status?: any) => void;

Manually set top level status.

property setSubmitting

setSubmitting: (isSubmitting: boolean) => void;

Manually set isSubmitting

property setTouched

setTouched: (
    touched: FormikTouched<Values>,
    shouldValidate?: boolean
) => Promise<void | FormikErrors<Values>>;

Manually set touched object

property setValues

setValues: (
    values: React.SetStateAction<Values>,
    shouldValidate?: boolean
) => Promise<void | FormikErrors<Values>>;

Manually set values object

property submitForm

submitForm: () => Promise<void>;

Submit the form imperatively

property validateField

validateField: (field: string) => Promise<void> | Promise<string | undefined>;

Validate field value

property validateForm

validateForm: (values?: any) => Promise<FormikErrors<Values>>;

Validate form values

interface FormikRegistration

interface FormikRegistration {}

Internal Formik registration methods that get passed down as props

property registerField

registerField: (
    name: string,
    fns: {
        validate?: FieldValidator;
    }
) => void;

property unregisterField

unregisterField: (name: string) => void;

interface FormikSharedConfig

interface FormikSharedConfig<Props = {}> {}

Base formik configuration/props shared between the HoC and Component.

property enableReinitialize

enableReinitialize?: boolean;

Should Formik reset the form when new initialValues change

property isInitialValid

isInitialValid?: boolean | ((props: Props) => boolean);

Tell Formik if initial form values are valid or not on first render

property validateOnBlur

validateOnBlur?: boolean;

Tells Formik to validate the form on each input's onBlur event

property validateOnChange

validateOnChange?: boolean;

Tells Formik to validate the form on each input's onChange event

property validateOnMount

validateOnMount?: boolean;

Tells Formik to validate upon mount

interface FormikState

interface FormikState<Values> {}

Formik state tree

property errors

errors: FormikErrors<Values>;

map of field names to specific error for that field

property isSubmitting

isSubmitting: boolean;

whether the form is currently submitting

property isValidating

isValidating: boolean;

whether the form is currently validating (prior to submission)

property status

status?: any;

Top level status state, in case you need it

property submitCount

submitCount: number;

Number of times user tried to submit the form

property touched

touched: FormikTouched<Values>;

map of field names to whether the field has been touched

property values

values: Values;

Form values

interface FormikValues

interface FormikValues {}

Values of fields in the form

index signature

[field: string]: any;

interface InferableComponentDecorator

interface InferableComponentDecorator<TOwnProps> {}

call signature

<T extends CompositeComponent<TOwnProps>>(component: T): T;

interface SharedRenderProps

interface SharedRenderProps<T> {}

property children

children?: (props: T) => React.ReactNode;

Children render function <Field name>{props => ...})

property component

component?: keyof JSX.IntrinsicElements | React.ComponentType<T | void>;

Field component to render. Can either be a string like 'select' or a component.

property render

render?: (props: T) => React.ReactNode;

Render prop (works like React router's <Route render={props =>} />)

interface WithFormikConfig

interface WithFormikConfig<
    Props,
    Values extends FormikValues = FormikValues,
    DeprecatedPayload = Values
> extends FormikSharedConfig<Props> {}

withFormik() configuration options. Backwards compatible.

property displayName

displayName?: string;

Set the display name of the component. Useful for React DevTools.

property handleSubmit

handleSubmit: (values: Values, formikBag: FormikBag<Props, Values>) => void;

Submission handler

property mapPropsToErrors

mapPropsToErrors?: (props: Props) => FormikErrors<Values>;

Map props to the form errors state

property mapPropsToStatus

mapPropsToStatus?: (props: Props) => any;

Map props to the form status

property mapPropsToTouched

mapPropsToTouched?: (props: Props) => FormikTouched<Values>;

Map props to the form touched state

property mapPropsToValues

mapPropsToValues?: (props: Props) => Values;

Map props to the form values

property mapValuesToPayload

mapValuesToPayload?: (values: Values) => DeprecatedPayload;

Deprecated
in 0.9.0 (but needed to break TS types)

property validate

validate?: (values: Values, props: Props) => void | object | Promise<any>;

Validation function. Must return an error object or promise that throws an error object where that object keys map to corresponding value.

property validationSchema

validationSchema?: any | ((props: Props) => any);

A Yup Schema or a function that returns a Yup schema

Type Aliases

type CompositeComponent

type CompositeComponent<P> = React.ComponentClass<P> | React.FunctionComponent<P>;

type FastFieldAttributes

type FastFieldAttributes<T> = GenericFieldHTMLAttributes & FastFieldConfig<T> & T;

type FastFieldConfig

type FastFieldConfig<T> = FieldConfig & {
    /** Override FastField's default shouldComponentUpdate */
    shouldUpdate?: (nextProps: T & GenericFieldHTMLAttributes, props: {}) => boolean;
};

type FieldArrayConfig

type FieldArrayConfig = {
    /** Really the path to the array field to be updated */
    name: string;
    /** Should field array validate the form AFTER array updates/changes? */
    validateOnChange?: boolean;
} & SharedRenderProps<FieldArrayRenderProps>;

type FieldArrayRenderProps

type FieldArrayRenderProps = ArrayHelpers & {
    form: FormikProps<any>;
    name: string;
};

type FieldAttributes

type FieldAttributes<T> = {
    className?: string;
} & GenericFieldHTMLAttributes &
    FieldConfig<T> &
    T & {
        name: string;
    };

type FieldHookConfig

type FieldHookConfig<T> = GenericFieldHTMLAttributes & FieldConfig<T>;

type FieldValidator

type FieldValidator = (value: any) => string | void | Promise<string | void>;

type FormikBag

type FormikBag<P, V> = {
    props: P;
} & FormikHelpers<V>;

Formik helpers + { props }

type FormikContextType

type FormikContextType<Values> = FormikProps<Values> &
    Pick<FormikConfig<Values>, 'validate' | 'validationSchema'>;

State, handlers, and helpers made available to Formik's primitive components through context.

type FormikErrors

type FormikErrors<Values> = {
    [K in keyof Values]?: Values[K] extends any[]
        ? Values[K][number] extends object
            ? FormikErrors<Values[K][number]>[] | string | string[]
            : string | string[]
        : Values[K] extends object
        ? FormikErrors<Values[K]>
        : string;
};

An object containing error messages whose keys correspond to FormikValues. Should always be an object of strings, but any is allowed to support i18n libraries.

type FormikFormProps

type FormikFormProps = Pick<
    React.FormHTMLAttributes<HTMLFormElement>,
    Exclude<keyof React.FormHTMLAttributes<HTMLFormElement>, 'onReset' | 'onSubmit'>
>;

type FormikProps

type FormikProps<Values> = FormikSharedConfig &
    FormikState<Values> &
    FormikHelpers<Values> &
    FormikHandlers &
    FormikComputedProps<Values> &
    FormikRegistration & {
        submitForm: () => Promise<any>;
    };

State, handlers, and helpers made available to form component or render prop of .

type FormikTouched

type FormikTouched<Values> = {
    [K in keyof Values]?: Values[K] extends any[]
        ? Values[K][number] extends object
            ? FormikTouched<Values[K][number]>[]
            : boolean
        : Values[K] extends object
        ? FormikTouched<Values[K]>
        : boolean;
};

An object containing touched state of the form whose keys correspond to FormikValues.

type GenericFieldHTMLAttributes

type GenericFieldHTMLAttributes =
    | JSX.IntrinsicElements['input']
    | JSX.IntrinsicElements['select']
    | JSX.IntrinsicElements['textarea'];

type InjectedFormikProps

type InjectedFormikProps<Props, Values> = Props & FormikProps<Values>;

State, handlers, and helpers injected as props into the wrapped form component. Used with withFormik()
Deprecated
Use OuterProps & FormikProps<Values> instead.

Package Files (12)

Dependencies (8)

Dev Dependencies (11)

Peer Dependencies (1)

react

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/formik.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/formik)

HTML

<a href="https://www.jsdocs.io/package/formik"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 7 months ago.
Package analyzed in 5118 ms.
Missing or incorrect documentation? Open an issue for this package.

formik

Install

Overview

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable ErrorMessage

variable FastField

variable FieldArray

variable Form

variable FormikConsumer

variable FormikContext

variable FormikProvider

Functions

function connect

Parameter Comp

function Field

function Formik

function getActiveElement

Parameter doc

See Also

function getIn

function insert

function isEmptyArray

function isEmptyChildren

function isFunction

function isInputEvent

function isInteger

function isNaN

function isObject

function isPromise

function isString

function move

function prepareDataForValidation

function replace

function setIn

See Also

function setNestedObjectValues

Parameter object

Parameter value

Parameter visited

Parameter response

function swap

function useField

function useFormik

function useFormikContext

function validateYupSchema

function withFormik

function yupToFormErrors

Interfaces

interface ArrayHelpers

property handleMove

property handlePop

property handleRemove

property handleSwap

property move

property swap

method handleInsert

method handlePush

method handleReplace

method handleUnshift

method insert

method pop

method push

method remove

method replace

method unshift

interface ComponentDecorator

call signature

interface ErrorMessageProps

property children

property className

property component

property id

property name

property render

interface FastFieldProps