formik

  • Version 2.4.6
  • Published
  • 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

Functions

Interfaces

Type Aliases

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)

                                                                                                                Badge

                                                                                                                To add a badge like this onejsDocs.io badgeto 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>