Formik Persist Values

Persist and rehydrate a Formik form values.

npm install formik-persist-remote-values --save

yard add formik-persist-remote-values

Basic Usage

Just import the <PersistFormikValues > component and put it inside any Formik form. It renders null!

1import React from 'react';
2import { Formik, Field, Form } from 'formik';
3import { PersistFormikValues } from 'formik-persist-values';
4
5export const Signup = () => (
6  <div>
7    <h1>My Cool Persisted Values</h1>
8    <Formik
9      onSubmit={values => console.log(values)}
10      initialValues={{ firstName: '', lastName: '', email: '' }}
11    >
12      {props => (
13        <Form className="whatever">
14          <Field name="firstName" placeholder="First Name" />
15          <Field name="lastName" placeholder="Last Name" />
16          <Field name="email" type="email" placeholder="Email Address" />
17          <button type="submit">Submit</button>
18          <PersistFormikValues name="signup-form" />
19        </Form>
20      )}
21    </Formik>
22  </div>
23);

Props

• name: string: LocalStorage key to save form state to
• ignoreValues:? string[]: Provide array of keys if you need to do not persist some values
• debounce:? number: Default is 300. Number of ms to debounce the function that saves form state.
• storage:? 'localStorage' | 'sessionStorage' | Storage | CustomStorage: default is localStorage . Send if you want Session storage or your own storage instead of Local storage
• persistInvalid:? boolean: default is false . Persist if you want to save invalid values
• hashInitials:? boolean: default is false . Hash initials values to prevent conflict between initialValues and persistedValues.
• hashSpecificity:? number: default is 7 . Hash initials values specificity to prevent conflict between cache hashes.

Author

• Alexsander Rocha [@alex-amaral]

Inspired by

• Jared Palmer @jaredpalmer
• formik-persist
• Grigoriy Kolenko @kolengri