Formik 3 Alpha

 npm install formik@next

1 interface FieldConfig<V> {
2   // ...omitted for brevity
3 
4   /**
5    * Function to parse raw input value before setting it to state
6    */
7   parse?: (rawInput: string, name: string) => V;
8 
9   /**
10    * Function to transform value passed to input
11    */
12   format?: (value: V, name: string) => any;
13 
14   /**
15    * Should Formik wait until the blur event before formatting input value?
16    * @default false
17    */
18   formatOnBlur?: boolean;
19 }
20 
21 // ...elsewhere...
22 
23 const [field] = useField({ name: 'phone', parse: rawInput => ... })
24 <Field name="phone" parse={rawInput => ... } />
25 <input {...formikProps.getFieldProps({ name: 'phone', parse: rawInput => ... }) />

1 export const MyReactNativeForm = props => (
2   <Formik
3     initialValues={{ email: '' }}
4     onSubmit={values => console.log(values)}
5   >
6     {({ handleChange, handleBlur, handleSubmit, values }) => (
7       <View>
8         <TextInput
9           onChangeText={handleChange('email')} // curried
10           onBlur={handleBlur('email')} // curried
11           value={values.email}
12         />
13         <Button onPress={handleSubmit} title="Submit" />
14       </View>
15     )}
16   </Formik>
17 );

1 export const MyTextField = props => {
2   const [field] = useField(props);
3   const onChange = e => {
4     e.persist();
5     if (e.target.value === 'foo') {
6       // Using the curried version of onChange,
7       // effectively equivalent to setFieldValue() no longer works
8       field.onChange(props.name)('bar');
9     } else {
10       field.onChange(e);
11     }
12   };
13   return <input {...field} onChange={onChange} />;
14 };

1 export const MyTextField = props => {
2   const [field] = useField(props);
3   const onChange = e => {
4     e.persist();
5     if (e.target.value === 'foo') {
6       // You can now just set the value
7       field.onChange('bar');
8     } else {
9       // Or pass an event
10       field.onChange(e);
11     }
12   };
13   return <input {...field} onChange={onChange} />;
14 };