Build forms in React, without the tears ๐Ÿ˜ญ

Last update: Jul 31, 2022
Comments
  • 1. Formik does not re-render when initialValues change

    Current Behavior

    If there is an "external" component controlling initialValues passed to Formik, Formik never updates it. This may be desired behavior, however in my specific case I need to re-render the form (and ideally, warn the user about unsaved changes) with new initialValues. If this is not a bug, any ideas on how to achieve this?

    Steps to Reproduce

    1. Open https://codesandbox.io/s/kworjlq7n3
    2. Toggle between the select options
    3. You will see that all components in the chain re-render with new values, however Formik render never changes initialValues.

    Expected behavior

    When initialValues change, Formik should trigger a re-render and provide new initialValues in its render method.

    CodeSandbox Link: https://codesandbox.io/s/kworjlq7n3

    EDIT: CodeSandbox demonstrates a working solution


    • Formik Version: 1.0.2
    • React Version: 16.3.2
    • TypeScript Version: N/A
    • Browser and Version: Chrome Version 68.0.3440.84 (Official Build) (64-bit)
    • OS: Mac OS 10.13.4
    Reviewed by iamvanja at 2018-08-06 18:42
  • 2. [v2] Hooks

    Improvements

    • [x] Create <Field as> prop (#1406)
    • [x] Add meta prop to <Field children> (#1406)
    • [x] Break out useFormik from <Formik>
    • [x] onReset and handleReset tests
    • [x] async onSubmit (no more setSubmitting(false) needed)
    • [x] Make validation cancellable (#1026, #671)
    • [x] useField's second element is field metadata (#343)
    • [x] Add initialErrors, initialTouched, initialStatus (#1410)
    • [x] Fix isValid (#1410)
    • [ ] <Field >'s uses handleBlur('path') and handleChange('path') override (#1113)
    • [x] Upgrade to TypeScript 3.5 and React 16.9 (#1559)

    Breaking Changes

    • Breaking TypeScript change: FormikActions have been renamed to FormikHelpers
    • Formik no longer uses console.error in its warnings, but rather console.warn

    Deprecations

    These are just warnings for now.

    • [x] <Field render> (#1406)
    • [x] <Field component> (#1406)
    • [x] isInitialValid and fix isValid (#1410)

    Documentation

    • [ ] useField
    • [ ] "Creating your own <FieldGroup>"
    • [ ] Checkboxes and Radio inputs
    • [ ] <FormikConsumer>
    • [ ] useFormikContext
    • [ ] useFormik
    • [ ] Rewrite examples with hooks
    • [ ] Rewrite tutorial with hooks
    • [ ] Migration Guide
    • [ ] Blog post

    Feel free to start making PR's to this branch. This is going to take a minute to figure out as there are a LOT of new paradigms.

    #1046 #1005

    Reviewed by jaredpalmer at 2018-10-30 23:11
  • 3. setFieldValue should return a Promise or receive a callback

    Feature

    Current Behavior

    setFieldValue() is async because it uses setState(), but it doesn't receive a callback or return anything. That's why it's hard to get modified values right after that, for example if I want to run submitForm().

    Desired Behavior

    setFieldValue() will return a promise, so I could await it and get changed values.

    Suggested Solutions

    return a Promise from setFieldValue() OR add additional callback to function declaration

    • Formik Version: 0.11.11
    • React Version: 16.2.0
    • CodeSandbox Link: https://codesandbox.io/s/x9445yl5lp
    Reviewed by today- at 2018-03-21 09:00
  • 4. Added nested values proposal prototype (#202)

    This is my quick suggestion to solve issue #202 . It is far from perfect (I don't use Typescript so I neglected types), also, I couldn't make lodash/fp working with Typescript, so I needed to use mutable _.set, and sadly I used it with deepClone. Of course this would need to be refactored, but this is just a prototype.

    If you like this idea, we could work on it more, add missing tests etc.

    The good news is, that all tests are passing so it is backward compatible change :)

    Reviewed by klis87 at 2017-10-12 16:04
  • 5. Initial validation or initialErrors prop

    What if the user has set some field values, and we do store them somewhere, and when the user returns to the app those values are invalid. Is there no way to run validate on initialization?

    Reviewed by morgs32 at 2017-12-03 12:46
  • 6. How does yup's trim work?

    I tried adding trim() to my formik validation schema:

    Yup.object().shape({
        label: Yup.string().trim().required('some error msg'),
    });
    

    But the field value is not being trimmed.

    Reviewed by sketchbuch at 2018-03-01 19:16
  • 7. Extend setValue functionality

    Formik is great, but there are one or two parts where the methods could be a little more TypeScript friendly, and in this PR I'm introducing a new method which I hope takes a step in this direction.

    For context: I have a form where a user can enter an ID into a field to perform a lookup. Data is fetched over HTTP, and I use data from the response to populate other form fields by using multiple setFieldValue calls. The signature of setFieldValue isn't type-safe โ€“ย the value is any, and the field may not necessarily exist. (There was some discussion of this in #1388)

    This PR introduces a setFieldValues method that takes a Partial<Values> and merges that with the existing form values. I would find this really useful.

    Things that I'm not too sure about, and that I'd welcome feedback on:

    • Does this method go against the design of Formik, where fields are referenced using the path-style string (eg. people.0.first_name)?
    • Is there a better name for this method, than setFieldValues? It's basically like setValues, but it allows subsets and merges rather than overwriting.
    Reviewed by samstarling at 2019-05-16 08:10
  • 8. Using styled components with formik is incredibly slow

    I'm just playing with formik library and found performance issue with custom component in Field tag when the custom component uses styled components heavily.

    When I keep pressing the key in an input box which is wrapped in multiple hierarchy of styled components, it causes huge lagging but instead of that, if I use simple divs, it is comparatively faster.

    Reviewed by mjangir at 2018-10-20 05:09
  • 9. v2.0 Umbrella Issue

    • [ ] Hooks (#1063)
    • [ ] Use JSX generics on <Field<Values>> (#726 , #370)
    • [ ] Add debugger / logger
    • [ ] Begin deprecating dirty, with warning (replaced withisDirty) (#353)
    • [ ] Add submitAttemptCount, submitFailureCount, submitSuccessCount and computed boolean counters? didSubmitSucceed and didSubmitFail or submitFailure / submitSuccess
    • [ ] Add warnings, setFieldWarning, setWarnings (#1001, #389)
    • [x] Async onSubmit (#486 , #500)
    • [x] Ensure that Formik context value is immutable
    • [ ] Promisify or give callbacks to all setFieldXXX functions
    Reviewed by jaredpalmer at 2018-08-15 12:42
  • 10. Slow on large form.

    I have a large form with 20~30 fields. It seems formik becomes slow when there are large number of fields. It seems to validate every field on every keystroke. Is there a good way to mitigate this issue?

    Reviewed by joonhocho at 2018-06-01 18:32
  • 11. Validation on each step of the Wizard Flow

    In the wizard example, I expected there to be validation on each step. As in, if you don't complete the form you can't continue to the next piece of the form.

    What would be the idiomatic Formik way to do this? Can we add this to the examples?

    Also the documentation (readme) doesn't mention Wizard. It would be nice to add.

    Reviewed by danielwong2268 at 2018-09-01 03:57
  • 12. isDirty but for individual inputs | check if specific inputs are dirty

    Feature request

    Current Behavior

    Currently there is no clean way to check if an input has been modified from it's initial value. Touched does not accomplish this, however touched is specific to each input, which is what I need but for dirty inputs. The current way to accomplish this is

    console.log(formik.getFieldMeta("inputName").value === formik.getFieldMeta("inputName").initialValue) // boolean
    

    Desired Behavior

    Suggested Solution

    My suggestion is to have a way to check if an individual input is dirty, just like you can do with touched. If I have a form that edits an item, I want to color inputs that have been modified from their initial value, but there is no simple way of doing this in formik, but formik is supposed to help make our code less verbose and help us do simple tasks quickly. Ideally formik.isDirty will be just like formik.touched , where it would have all the individual inputs, and you can still use it as a boolean by parsing the empty object, and in that way it would keep the current functionality that isDirty has (checking if ANY of the inputs are dirty) Though changing isDirty to an object might be an issue because all the typescript users will have to go back and parse it as boolean when they update their formik version. There are other ways such as adding a .dirty instead of .isDirty , or having an isDirty property in each field's metadata.

    Who does this impact? Who is this for?

    This feature impacts anyone who needs to check if an individual input has been dirtied, and this is a common use case especially when you have an form which edits an item that has default initial values already, you would want to help the user by showing him which fields he has modified with different classes or styles.

    Describe alternatives you've considered

    Currently I am making my own function to check specific input dirt, but I am very opposed to this as formik should have something like this built in, and maybe not even in a function which also looks bad for booleans

    	function isInputDirty(name: keyof IInput) {
    		let boolean = formik.getFieldMeta(name).value === formik.getFieldMeta(name).initialValue
    		return !boolean
    	}
    

    Additional context

    Reviewed by TamirCode at 2022-08-09 11:24
  • 13. Need an example of Material UI Dialog usage w/ Formik

    Feature request

    Material UI dialogs are handled differently from regular forms in that they need unusual wrapping with Dialog tags buttons. I've found two much different examples of how it should be done but an official docs technique would be nice to have IMHO...

    https://gist.github.com/michieldewilde/d7c5399e445bf8d1965aafe4f3162adb https://tidyelement.com/2022/01/12/building-a-react-modal-with-formik-mui-textfield-and-select/

    It's not super obvious which is the best way...

    Reviewed by kenyee at 2022-08-08 20:46
  • 14. Changing a field does not rerenders other fields

    Hi. If a field change then all fields and component use useFormikCotext rerenders. It see to example https://codesandbox.io/s/formik-rerender-test-v8gw7x. It is not really good.

    After my change: https://user-images.githubusercontent.com/8194467/183079431-5629cb92-caf2-43d5-90df-94b66968c90a.mov

    I wanted do Formik like React.Component and useFormik functions moved to Formik. Example here is https://github.com/DjoSmer/react-form-context-example/blob/master/src/features/profile/components/PersonalNames/FormControl.tsx.

    Sorry for my english.

    Reviewed by DjoSmer at 2022-08-05 13:09
  • 15. Add a Form onChange Callback

    Feature request

    Current Behavior

    Currently there is not way to detect changes globally on a Form. The only way to detect changes is to add a callback on every input fields within the form.

    Desired Behavior

    It would be very use full to have an onValuesChange callback function on the Form it self, pretty much like Ant Design does: here

    Suggested Solution

    When ever a form.handleChange is called, the onValuesChange callback must be called.

    Who does this impact? Who is this for?

    Would be use full to anyone. I'm trying change the state of the submit button only when some values has changed and it would be much easier with this callback.

    Describe alternatives you've considered

    None

    Additional context

    None

    Reviewed by oliviercperrier at 2022-08-01 20:42
  • 16. helpers.setValue causes infinite loop when called inside useEffect in React 18

    Bug report

    Calling helpers.setValue results in an infinite loop when it's called inside useEffect in React 18.

    React 17: https://codesandbox.io/s/formik-usefield-hook-react-18-bug-forked-ucpg4d?file=/src/App.js

    React 18: https://codesandbox.io/s/formik-usefield-hook-react-18-bug-nr052g?file=/src/App.js

    The code of the App component is exactly the same on both sandboxes, what changes is the React major version.

    Expected behavior

    React 17: If you click on the CLICK button in the React 17 sandbox, you will see that the input value will change from [email protected] to [email protected] ๐Ÿ†— โœ…

    Current Behavior

    React 18: If you click on the CLICK button in the React 18 sandbox, it will cause an infinite loop โš ๏ธโ—

    Suggested solution(s)

    I don't know exactly what could be the root cause of this issue, but I suspect that it's related to the Automatic Batching feature/breaking change introduced by React 18:

    https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching

    What happens in practice is that the reducer for SET_FIELD_VALUE is never called for some reason, even though it's action gets dispatched within the setFieldValue function. The reducer for SET_ISVALIDATING is executed instead.

    On React 17:

    • Formik's setFieldValue is called;
    • dispatch SET_FIELD_VALUE
    • Reducer for SET_FIELD_VALUE is executed
    • validateFormWithHightPriority is then executed โœ…

    On React 18:

    • Formik's setFieldValue is called;
    • dispatch SET_FIELD_VALUE
    • validateFormWithHightPriority is executed โ—
    • Reducer for SET_ISVALIDATING is executed
    • Reducer for SET_FIELD_VALUE is never executed for some reason โš ๏ธ

    The infinite loop is then caused by the useField hook always returning the old value instead of the new value that was set through helpers.setValue(value).

    Screenshot 2022-07-11 at 17 23 50

    Screenshot 2022-07-11 at 17 23 33

    Screenshot 2022-07-11 at 17 24 45

    Your environment

    | Software | Version(s) | | ---------------- | ---------- | | Formik | 2.2.9 | React | 18.2.0 | TypeScript | - | Browser | Chrome | npm/Yarn | Yarn | Operating System | Mac OS X

    Reviewed by antonvialibri1 at 2022-07-11 15:33
A simple and easy way to control forms in React using the React Context API
A simple and easy way to control forms in React using the React Context API

A simple and easy way to control forms in React using the React Context API Getting Started Install With npm npm install --save formcat With yarn yar

May 22, 2022
๐Ÿ“‹ React Hooks for forms validation (Web + React Native)
๐Ÿ“‹ React Hooks for forms validation (Web + React Native)

Performant, flexible and extensible forms with easy to use validation. English | ็นไธญ | ็ฎ€ไธญ | ๆ—ฅๆœฌ่ชž | ํ•œ๊ตญ์–ด | Franรงais | Italiano | Portuguรชs | Espaรฑol | ะ ัƒั

Aug 4, 2022
Reactive forms for react and react native, using hooks and [email protected]
Reactive forms for react and react native, using hooks and Mobx@6

Reactive forms for react and react native, using hooks and [email protected] Installation: npm install -s react-fluid-form mobx mobx-react yup lodash // or: yarn

Aug 2, 2022
React library for rendering forms.
React library for rendering forms.

Data Driven Forms is a React library used for rendering and managing forms with a lot of provided features based on React Final Form. โ“ Why to use Dat

Jul 27, 2022
A React component for building Web forms from JSON Schema.
A React component for building Web forms from JSON Schema.

react-jsonschema-form A simple React component capable of using JSON Schema to declaratively build and customize web forms. Explore the docs ยป View Pl

Aug 7, 2022
A React library for building forms from any schema.
A React library for building forms from any schema.

A set of React libraries for building forms from every schema.

Aug 2, 2022
A bare minimal React form library for quick & simple forms.
A bare minimal React form library for quick & simple forms.

React library using React Hooks to build forms & let you switch in & out Bootstrap 4 styling. React Bare Forms aka RBF aims to be the easiest to use f

May 10, 2022
Country / region React select boxes for your forms.

react-country-region-selector About Features Gotchas Demo Installation Usage List of component options Command-line Changelog Tests Thanks! License (s

Aug 3, 2022
Handling forms in React Native using Formik and Yup.

##Handling forms in React Native using Formik and Yup. Usage # install dependencies yarn install # run bundler yarn run serve # run on Android devic

Jun 2, 2022
Zero-Configuration Reactive forms for Svelte
Zero-Configuration Reactive forms for Svelte

Formula + Beaker ฮ”โ†’ Reactive Forms for Svelte Documentation Changelog svelte-formula is a Library for use with Svelte that super-charges your ability

Jul 24, 2022
FormPress: Open Source form builder which lets you safely collect data through custom forms
FormPress: Open Source form builder which lets you safely collect data through custom forms

Open Source Form Builder With Safe Data Collection FormPress is an innovative, a

Jul 29, 2022
Paperfreeform - A Free Form Builder to save trees and create beautiful forms

PaperFreeForm PaperFreeForm is a Free Form Builder to save trees and create beau

Feb 24, 2022
Implementation Angular 13 Form Validation with Submit using Reactive Forms Module and Bootstrap 4.

Implementation Angular 13 Form Validation with Submit using Reactive Forms Module and Bootstrap 4. The form has: Full Name: required Username: require

May 5, 2022
React hook for handling Laravel form requests and validation (for React & React Native)

React-use-form: React hook for handling form states, requests, and validation, compatible with React and React Native. โœ… Simple and intuitive API โœ… 10

Apr 5, 2022
A simple react and react native form validator inspired by Laravel validation.

Simple React Validator is exactly as it sounds. We wanted to build a validator for react that had minimal configuration and felt natural to use. It's configuration and usage is similar to the Laravel PHP framework and make validation as easy as one line.

Jul 21, 2022
A simple, fast, and opinionated form library for React & React Native focusing on UX.
A simple, fast, and opinionated form library for React & React Native focusing on UX.

react-ux-form A simple, fast, and opinionated form library for React & React Native focusing on UX. ?? Take a look at the demo website. Setup $ npm in

Jul 15, 2022
React Hook Form Validation example with react-hook-form 7 and Bootstrap 4

React Hook Form Validation example with react-hook-form 7 and Bootstrap 4 Project setup In the project directory, you can run: npm install # or yarn i

Mar 17, 2022
This Login Form made using React hooks , React Js , Css, Json. This form have 3 inputs, it also validate those inputs & it also having length limitations.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022
In This project a meme generator app is built using react to learn various concepts of React.
In This project a meme generator app is built using react to learn various concepts of React.

Create React Meme Generator App In This project a meme generator app is built using react to Learn various concepts of React. Objectives States States

Jan 5, 2022