formik

Build forms in React, without the tears 😭

APACHE-2.0 License

Downloads
11.2M
Stars
33.5K
Committers
456

Bot releases are hidden (Show)

formik -

Published by jaredpalmer over 6 years ago

Patch

  • Fixes #597 . Add a safety check to see if Formik is still mounted before calling setState after asynchronous validation. This prevents a race condition if a form is submitted very quickly and blur/change validation takes longer than presubmit and various other edge cases.
formik -

Published by jaredpalmer over 6 years ago

Patch

  • #755 Fixed a bug where isSubmitting was incorrectly being set to false before submission was run.
formik -

Published by jaredpalmer over 6 years ago

Patch

  • Change es module output filename from formik.es6.js to formik.esm.js
  • Field-level validations now also run in setFieldValue and setFieldTouched
  • Fixed bug where isSubmitting was always true in v1.0.0-beta.4 🤷‍♂️ whoops.
  • Replace any on <Form /> with proper TS types

Commits:

  • Change module filename from .es6.js to .esm.js 18cbc36
  • Improve field level validation (#736) f3c3157
  • Replace 'any' on with proper types (#730) 7fc86da
  • Update Bug_report.md 5497d72
  • Update Feature_request.md b14e0cf

Special thanks to @Andreyco for digging into the Field-level validation stuff!

Happy Birthday to Formik 🎂 🎉

It's been an awesome year!

  • 1 million NPM downloads
  • Over 7500 stars

Thank you all for the support!

formik -

Published by jaredpalmer over 6 years ago

Patch

  • #724 Fix: collecting field-level validations results before submit
  • #722 Clearer example snippet for FieldArray
formik -

Published by jaredpalmer over 6 years ago

What's new?

  • TypeScript 2.9.1
  • Fixed bug with FastField x React 16.4
  • Better IE support #689
  • Added react storybook
  • submitForm now returns a Promise (Very useful for testing)
  • Better independent Field-level validation All mounted field-level validation functions (e.g. <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.
  • Removed react-lifecycles-compat as a dep because we are no longer using getDerivedStateFromProps

What's coming next?

  • Add isValidating
  • Add fields or mountedFields. This is a map of currently mounted Field and FastField inputs.
  • Deprecate dirty and replace with isDirty
  • Discuss adding initialErrors, initialTouched, and initialStatus, and initialState
  • Fix setIn cloning
  • Document how to use shouldComponentUpdate to boost performance on gigantic forms
  • Get rid of enzyme from the codebase
  • Suspense!
  • Website

Commits:

  • Make storybook look good 9027617
  • Fix yarn.lock 9e7255b
  • feat: adds storybook (#620) 26e9929
  • Add bottom-up independent field-level validation (#684)a2475cc
  • Update README.md (#717) f6d4ebd
  • Remove react-lifecycles-compat (#715) b65118a
  • Update README.md (#714) cae1789
  • Fix #673. Fix fastfield using cDU (#674) 219b92f
  • Update README.md (#713) fa5ac31
  • fix: website/.snyk & website/package.json to reduce vulnerabilities (#709) 4f67fb8
  • Bump to TS 2.9.1 (#679) 8fba3e0
  • Close #687. Bump to Jest 23 (#688) 83aa257
  • Use fbjs's getActiveElement for better IE support (#689) 6913206
  • sync handleBlur with handleChange (#677) 5a786b1
  • tiny typing error (#672) 8e5f7b0
  • docs: fix typos (#668) c425955
  • Add testimonials (#661) 7d2b15b
  • Update README.md to reference latest gzip size (#656) 56dd598
  • update examples with yup to follow changes made to yup (removing default export) (#654) 32379a2
  • fix undefined var in react native (#653) 5bb226b
  • Update yup import (#651) 3dd5b6c
  • Fix broken link in Readme (#642) 75fde98
formik -

Published by jaredpalmer over 6 years ago

Patch

  • Fix TS import syntax

Commits

  • Fix #625. Use import * as React 3e68702
  • Warn against button with unspecified type (#615) 022e098
  • Update README.md (#618) a89e5ed
formik -

Published by jaredpalmer over 6 years ago

React 16.3.2 Support is here!

bitmoji

NO BREAKING CHANGES. Formik still supports React v15+

What's new? 🍾 🎉

  • React 16.3.2 support 💯
  • No more dependency on prop-types or @types/prop-types for those using 16.3.2+. Earlier versions are polyfilled thanks to create-react-context
  • TypeScript 2.8.3
  • Exported CommonJS build development version (kind of like React does) with warnings
  • **New primitives (for advanced users) that want to hook into Formik context directly:
    • <FormikConsumer> this is a render prop that exposes Formik's context
    • connect() 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.

Roadmap 🔭 🚀

  • Fix isSubmitting
  • Finish the website and release 1.0
  • Rewrite the docs and tutorial
  • State reducer / middleware
  • TS 2.9 will support JSX Generics. TBD if this should be a breaking change or not, but basically we'll be able to do <Formik<Values> render={props => }/> and <Field<Values> name="..." />. Very very exciting.
  • Move to a Monorepo and build React Native <Field>
  • Consolidate <FastField> into <Field>, and then deprecate <FastField>.
  • Consider removing form and field from Formik's <Field render> and just pass through props now that FormikConsumer exists. More discussion on this.

Commits (that matter)

  • #594 React 16.3
formik -

Published by jaredpalmer over 6 years ago

#perf, yo

Formik is now ~7.8 KB min gizipped motherforkas

formik -

Published by jaredpalmer over 6 years ago

What's New

  • Added innerRef to Field and FastField if they are string components.
  • Fix NaN behavior
  • Clean up some unused code
  • Improve internal TS type signatures

Commits:

  • Update links in toc c72281c
  • docs: FormikError -> FormikErrors (#589) a56bbc7
  • Add isNaN util function instead of Number.isNaN (#588) 3725fd5
  • Remove unused private method: isReactNative (#585) ecda967
  • Add size-limit to prevent accidental bloat (#528) faabe08
  • Add innerRef prop to Field & FastField string components (#580) 0cec09d
  • Remove duplicated interfaces (#575) b72382e
  • fix issue when the object has a key that is one of the path's parts (#569) 095e915
  • Merge branch 'master' of github.com:jaredpalmer/formik 636a670
  • Bump site deps 65aae84
  • improved validateYupSchema types (#554) 952a084
  • fix Arrays example (#550) 164b139
  • Fix link to basics 14eb509
  • Update api.md 05ac4fe
  • Docs (#549) f26590e
formik -

Published by jaredpalmer over 6 years ago

Minor Release

New stuff

  • TypeScript 2.8 (#543)
    • Dramatically improved FormikTouched type signature thanks to conditional types.
    • There should be more improvements to type signatures coming soon.
  • Add replace array helper (#520)
  • Pass in next initialValues into FastField's reset function (#462)
  • New ways to use handleChange and handleBlur (#521)
    • You can now omit a 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} />

Internals

  • Added testimonials to docs
  • Bumped up deps for TS
  • Official types test added
formik -

Published by jaredpalmer over 6 years ago

Minor Release

New Stuff

  • 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.
  • Updated docs
  • Improved build tooling

Commits

  • Remove hoistStatics from src 6ca00ad
  • Stop bundling external dependencies (#513) 9ec072a
  • Fix formatting for Table of Contents header (#425) 6857709
  • Improve FieldArray example in README (#433) 62f03d1
  • Add submitCount to Formik (#477) 89eaf0a
  • Call validate method for each step (#508) b29e602
  • Update README.md (#501) 5a71a47
  • fix: modify conditionals in Guides#Basics in README (#498) e05ca99
  • Fix example for Field#validate in README (#482) ee37297
formik -

Published by jaredpalmer over 6 years ago

Patch Release

  • <FastField> now updates for external setter calls
  • handleSubmit 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.
  • Internal refactoring to reduce bundle size

Commits

  • Set state of value and error after validateYupSchema sync (#457) 6405d22
  • Point to the new .d.ts location eb13945
  • Close #448. Make fastfield update for external setter calls fde20a6
  • Allow handleSubmit to be called without preventDefault (#451) 12c100b
  • rename file formik to Formik (#452) 263befb
  • Merge branch 'master' of github.com:jaredpalmer/formik 0ce24e3
  • Add travis yarn cache d925c3a
  • Update ISSUE_TEMPLATE.md 0a83825
  • Update ISSUE_TEMPLATE.md 4f2a092
  • Simplify isPromise and add tests (#443) 74d8be4
  • Merge branch 'master' of github.com:jaredpalmer/formik 6bce509
  • Remove circular exports, shave bytes! 6c3e062
  • Fix typo in FieldArray example (#447) d36aa71
formik -

Published by jaredpalmer over 6 years ago

Alpha Release

New Stuff

  • <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.
  • Curried handleChange and handleBlur: You can now optionally pass a dotpath / name to both 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.
  • Curried array helpers: Each array helper provided via <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>
formik -

Published by jaredpalmer over 6 years ago

Patch Release

Bug Fixes

  • resetForm should reinitialize this.initialValues even if nextValues is not provided (#444)
  • Fixed empty input type=number results in NaN (#437)
  • <Field children/> can be a function or a node in TypeScript with strict mode (#426)
formik -

Published by jaredpalmer over 6 years ago

Breaking change for React Native TypeScript vs. 11.9

  • Removed react native types (and GestureResponder type) for 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!

formik -

Published by jaredpalmer over 6 years ago

Broken install. DO NOT USE.

formik -

Published by jaredpalmer over 6 years ago

Patch Release

  • Tweak TypeScript typings of 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!
formik -

Published by jaredpalmer over 6 years ago

New stuff

  • Add new prop validateOnChange?: boolean to FieldArray, default is true to trigger validation function after array manipulations
  • Export setIn and getIn functions out of utils (undocumented) for power users

Bug fixes

  • Add safer calls to array methods in FieldArray
  • Add docs about validation gotchas when using FieldArray

Internals

  • Rename dlv to getIn
  • Rename setDeep to setIn and swap argument order
  • Update test names
  • Add react-dom types to dev
formik -

Published by jaredpalmer over 6 years ago

New stuff

  • Add ability to skip running validation in setFieldValue and setFieldTouched b7a6c5b
  • Added react native types, fixed handleSubmit in rn/typescript (#379) 54db7ce 6a5d963

Bug fixes

  • Fix typings for FieldConfig['component'] (#409) d4c36db

Improvements

  • Remove null usage from setNestedObjectValues 17f379a
  • Upgrade rollup (#406) eb1b26e
  • Optionalize FormikErrors (#405) b6786f4
formik -

Published by jaredpalmer over 6 years ago

Patch release

  • Pass name as a prop to <FieldArray render>
Package Rankings
Top 0.27% on Npmjs.org
Top 3.35% on Proxy.golang.org
Badges
Extracted from project README
Stable Release Blazing Fast gzip size license Discord