fpv

formik-persist-values

🍦 Make Formik persistance sweet again! Persist and rehydrate a Formik form values to localStorage or sessionStorage

Showing:

Popularity

Downloads/wk

242

GitHub Stars

7

Maintenance

Last Commit

2mos ago

Contributors

6

Package

Dependencies

2

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Formik Persist Values

Persist and rehydrate a Formik form values.

npm install formik-persist-values --save
yard add formik-persist-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 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: 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 values while the form is invalid.
  • 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

Inspired by

Thanks

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100