Persist and rehydrate a Formik form.
npm install formik-persist --save
Just import the <Persist >
component and put it inside any Formik form. It renders null
!
import React from 'react'
import { Formik, Field, Form } from 'formik'
import { Persist } from 'formik-persist'
export const Signup = () =>
<div>
<h1>My Cool Persisted Form</h1>
<Formik
onSubmit={values => console.log(values)}
initialValues={{ firstName: '', lastName: '', email: '' }}
render={props =>
<Form className="whatever">
<Field name="firstName" placeholder="First Name" />
<Field name="lastName" placeholder="Last Name" />
<Field name="email" type="email" placeholder="Email Address" />
<button type="submit">Submit</button>
<Persist name="signup-form" />
</Form>}
/>
</div>;
Only three props!
name: string
: LocalStorage key to save form state todebounce:? number
: Default is300
. Number of ms to debounce the function that saves form state.isSessionStorage:? boolean
: default isfalse
. Send if you want Session storage inplace of Local storage
- Jared Palmer @jaredpalmer
- Alternative storages (localForage)
- Support AsyncStorage for React Native