Automatically saves and loads Formik forms by
using localStorage
, sessionStorage
, or your own storage system!
yarn add formik-remember
or
npm install formik-remember --save
Just import the <Remember >
component and put it inside any Formik form. It renders null
!
import React from 'react'
import { Formik, Field, Form } from 'formik'
import Remember from 'formik-remember'
interface IFormikForm {
firstName: string;
lastName: string;
email: string;
}
export const Signup = () => {
return (
<Formik<IFormikForm>
onSubmit={values => console.log(values)}
initialValues={{ firstName: '', lastName: '', email: '' }}
>
{() => (
<Form>
<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>
<Remember<IFormikForm> name="signup-form" />
</Form>
)}
</Formik>
);
}
Key to save form state to
Custom parse method for your data (T is your data type).
default: JSON.parse
Whether the data should be cleared after the form is submitted.
default: true
Whether the data should ONLY be saved after the form is submitted.
default: false
Custom dump method for your data (T is your data type).
default: JSON.stringify
The method which sets your data.
This method should NOT dump it, that's what dump
is for.
This function should ONLY set the raw output of parse
.
default: localStorage.setItem
The method which returns your data.
This method should NOT parse it, that's what parse
is for.
This function should ONLY return your data in a raw string format.
default: localStorage.setItem
The method which clears your data.
default: localStorage.removeItem
Sometimes you need to do something with the saved data, this function will be called after the Formik form has been filled (the form will only be set if there is data saved, and it's different from the current state of the form).
default: localStorage.removeItem
Yes that's true, but that package seems to be unmaintained. No pull requests are accepted anymore and issues haven't been resolved for over a year.
This package welcomes pull requests and merges them :)