formik-persist-remote-values
v1.1.0
Published
Persist and rehydrate a Formik values
Downloads
14
Maintainers
Readme
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
!
import React from 'react';
import { Formik, Field, Form } from 'formik';
import { PersistFormikValues } from 'formik-persist-values';
export const Signup = () => (
<div>
<h1>My Cool Persisted Values</h1>
<Formik
onSubmit={values => console.log(values)}
initialValues={{ firstName: '', lastName: '', email: '' }}
>
{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>
<PersistFormikValues name="signup-form" />
</Form>
)}
</Formik>
</div>
);
Props
name: string
: LocalStorage key to save form state toignoreValues:? string[]
: Provide array of keys if you need to do not persist some valuesdebounce:? number
: Default is300
. Number of ms to debounce the function that saves form state.storage:? 'localStorage' | 'sessionStorage' | Storage | CustomStorage
: default islocalStorage
. Send if you want Session storage or your own storage instead of Local storagepersistInvalid:? boolean
: default isfalse
. Persist if you want to save invalid valueshashInitials:? boolean
: default isfalse
. Hash initials values to prevent conflict between initialValues and persistedValues.hashSpecificity:? number
: default is7
. 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