Build forms in React, without the tears 😭
APACHE-2.0 License
Bot releases are hidden (Show)
formik.es6.js
to formik.esm.js
setFieldValue
and setFieldTouched
isSubmitting
was always true
in v1.0.0-beta.4 🤷♂️ whoops.any
on <Form />
with proper TS typesSpecial thanks to @Andreyco for digging into the Field-level validation stuff!
It's been an awesome year!
Thank you all for the support!
submitForm
now returns a Promise (Very useful for testing)<Field validation={() => ..}/>
) now run prior to top-level validation
and validationSchema
when submit is attempted. The results of the field-level validations are then deeply merged with the results of any top-level validation. Previously, people who used field-level validation and set validateOnChange
and validateOnBlur
to false
would not have their validations run prior to submission. This fixes that.react-lifecycles-compat
as a dep because we are no longer using getDerivedStateFromProps
isValidating
fields
or mountedFields
. This is a map of currently mounted Field and FastField inputs.dirty
and replace with isDirty
initialErrors
, initialTouched
, and initialStatus
, and initialState
setIn
cloningshouldComponentUpdate
to boost performance on gigantic formsNO BREAKING CHANGES. Formik still supports React v15+
prop-types
or @types/prop-types
for those using 16.3.2+. Earlier versions are polyfilled thanks to create-react-context
<FormikConsumer>
this is a render prop that exposes Formik's contextconnect()
an Higher order component that wraps <FormikConsumer>
I am purposefully not documenting the new context helpers, because there shouldn't be any backwards compat issues due to the fact that create-react-context
uses prop-types
under the hood in versions less than 16.
isSubmitting
<Formik<Values> render={props => }/>
and <Field<Values> name="..." />
. Very very exciting.<Field>
<FastField>
into <Field>
, and then deprecate <FastField>
.form
and field
from Formik's <Field render>
and just pass through props now that FormikConsumer
exists. More discussion on this.lodash.isequal
for @formidablelabs' react-fast-compare
Field
and FastField
if they are string components.FormikTouched
type signature thanks to conditional types.replace
array helper (#520)initialValues
into FastField
's reset function (#462)handleChange
and handleBlur
(#521)
name
attribute when using handleChange and handleBlur if you pass them a string as the first argument. They have been modified to return a handler (like Preact's linkState
helper). The curried handleChange handler also has the flexibility to accept either an event
OR a string as it's argument--so you can use it with React Native's <TextInput onChangeText/>
too! In other words, you can now do this...// You can now do this....
<input onChange={handleChange('firstName')} value={values.firstName} />
// and in React Native
<TextInput onChangeText={handleChange('firstName')} value={values.firstName} />
submitCount
is now tracked by Formik state. More specifically, this tracks submit "attempts." It increments whenever either handleSubmit
or submitForm
are called (before Formik looks if there are errors present). It resets to 0
when either resetForm
or handleReset
are called. Note: this may be renamed submitAttemptCount
in the future.FieldArray
example in README (#433) 62f03d1<FastField>
now updates for external setter callshandleSubmit
now checks for the synthetic event before calling event.preventDefault()
meaning it can now be used safely in React Native and saving you an arrow function.<FastField>
: This is an optimized version of <Field>
that only re-renders when necessary. More documentation is necessary, but essentially, <FastField>
keeps state locally if possible and then updates the parent <Formik>
state only when the <FastField>
is blurred (i.e. when onBlur
is fired). The key insight is that 99% of time, only one field is changing at a time in your form. However, if you are doing complex validation wherein one input's value can cause an error in another input, <FastField>
will act like <Field>
and just re-render on each update. Depending on the feedback, <FastField>
may replace <Field>
entirely in the future. Please be gentle.handleChange
and handleBlur
and they will each return an optimized handler. This works like Preact's linkState mixin. So now you can do<TextInput onChangeText={handleChange('firstName')} value={values.firstName}/>
in React Native and also just <input onChange={handleChange('firstName')} value={values.firstName}/>
in React DOM.<FieldArray>
(e.g. push('something')
) now also has a curried version of itself (e.g. handlePush('something')
). You can use these to avoid an arrow function inside of render: <button onClick={arrayHelpers.handlePush('')}>Add</button>
resetForm
should reinitialize this.initialValues even if nextValues is not provided (#444)type=number
results in NaN
(#437)<Field children/>
can be a function or a node in TypeScript with strict mode (#426)handleChange
. This was causing pain and suffering for regular TypeScript users due to how react-native includes conflicting typings vs @types/node
. 🤷♀️We will have to make a separate formik-native package or build going forward. Sorry everyone!
FormikTouched
so that it fully supports deeply nested forms. This fix is temporary and will be further improved when TypeScript 2.8 comes out in March and we can use the new conditional types. Thank you @weswigham for the help!validateOnChange?: boolean
to FieldArray
, default is true
to trigger validation function after array manipulationssetIn
and getIn
functions out of utils (undocumented) for power usersdlv
to getIn
setDeep
to setIn
and swap argument orderreact-dom
types to devFormikErrors
(#405) b6786f4