formik

  • Version 2.2.9
  • Published
  • 580 kB
  • 7 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: any;

          variable FormikConsumer

          const FormikConsumer: any;

            variable FormikContext

            const FormikContext: any;

              variable FormikProvider

              const FormikProvider: any;

                Functions

                function connect

                connect: <OuterProps, Values = {}>(Comp: any) => 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,
                ...props
                }: FieldAttributes<any>) => any;

                  function Formik

                  Formik: <Values extends FormikValues = FormikValues, ExtraProps = {}>(
                  props: FormikConfig<Values> & ExtraProps
                  ) => any;

                    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: (arrayLike: ArrayLike<any>, index: number, value: any) => 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 any;
                      • 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: (array: any[], from: number, to: number) => unknown[];
                      • Some array helpers!

                      function prepareDataForValidation

                      prepareDataForValidation: <T extends FormikValues>(values: T) => FormikValues;
                      • Recursively prepare values.

                      function replace

                      replace: (arrayLike: ArrayLike<any>, index: number, value: any) => 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: (arrayLike: ArrayLike<any>, 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: any): void;
                            <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
                            };
                            handleChange: {
                            (e: any): void;
                            <T_1 = any>(field: T_1): T_1 extends any
                            ? void
                            : (e: string | React.ChangeEvent<any>) => void;
                            };
                            handleReset: (e: any) => void;
                            handleSubmit: (e?: React.FormEvent<HTMLFormElement> | undefined) => void;
                            resetForm: (nextState?: Partial<FormikState<Values>> | undefined) => void;
                            setErrors: (errors: FormikErrors<Values>) => void;
                            setFormikState: (
                            stateOrCb:
                            | FormikState<Values>
                            | ((state: FormikState<Values>) => FormikState<Values>)
                            ) => void;
                            setFieldTouched: (
                            field: string,
                            touched?: boolean,
                            shouldValidate?: boolean | undefined
                            ) => Promise<FormikErrors<Values>> | Promise<void>;
                            setFieldValue: (
                            field: string,
                            value: any,
                            shouldValidate?: boolean | undefined
                            ) => 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 | undefined
                            ) => Promise<FormikErrors<Values>> | Promise<void>;
                            setValues: (
                            values: any,
                            shouldValidate?: boolean | undefined
                            ) => 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: 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 {}

                                  property handleInsert

                                  handleInsert: (index: number, value: any) => () => void;
                                  • Curried fn to insert an element at a given index into the array

                                  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 handlePush

                                  handlePush: (obj: any) => () => void;
                                  • Curried fn to add a value to the end of an array

                                  property handleRemove

                                  handleRemove: (index: number) => () => void;
                                  • Curried fn to remove an element at an index of an array

                                  property handleReplace

                                  handleReplace: (index: number, value: any) => () => void;
                                  • Curried fn to replace an element at a given index into the array

                                  property handleSwap

                                  handleSwap: (indexA: number, indexB: number) => () => void;
                                  • Curried fn to swap two values in an array

                                  property handleUnshift

                                  handleUnshift: (value: any) => () => void;
                                  • Curried fn to add an element to the beginning of an array

                                  property insert

                                  insert: (index: number, value: any) => void;
                                  • Imperatively insert an element at a given index into the array

                                  property move

                                  move: (from: number, to: number) => void;
                                  • Imperatively move an element in an array to another index

                                  property push

                                  push: (obj: any) => void;
                                  • Imperatively add a value to the end of an array

                                  property replace

                                  replace: (index: number, value: any) => void;
                                  • Imperatively replace a value at an index of an array

                                  property swap

                                  swap: (indexA: number, indexB: number) => void;
                                  • Imperatively swap two values in an array

                                  property unshift

                                  unshift: (value: any) => number;
                                  • Imperatively add an element to the beginning of an array and return its length

                                  method pop

                                  pop: <T>() => T | undefined;
                                  • Imperatively remove and return value from the end of the array

                                  method remove

                                  remove: <T>(index: number) => T | undefined;
                                  • Imperatively remove and element at an index of an array

                                  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 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 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) => void;
                                                            • Set the field's touched value

                                                            property setValue

                                                            setValue: (value: Value, shouldValidate?: boolean) => void;
                                                            • 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>> | React.ReactNode;
                                                                    • 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: any) => 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
                                                                              ) => void;
                                                                              • Set whether field has been touched directly

                                                                              property setFieldValue

                                                                              setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
                                                                              • 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) => void;
                                                                              • Manually set touched object

                                                                              property setValues

                                                                              setValues: (
                                                                              values: React.SetStateAction<Values>,
                                                                              shouldValidate?: boolean
                                                                              ) => void;
                                                                              • Manually set values object

                                                                              property submitForm

                                                                              submitForm: () => Promise<void>;
                                                                              • Submit the form imperatively

                                                                              property validateField

                                                                              validateField: (field: string) => void;
                                                                              • 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?: string | 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.StatelessComponent<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> = 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 (7)

                                                                                                              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>