enhanced-formik-persist

Persist and rehydrate a Formik form

Usage no npm install needed!

<script type="module">
  import enhancedFormikPersist from 'https://cdn.skypack.dev/enhanced-formik-persist';
</script>

README

Formik Persist

Persist and rehydrate a Formik form.

npm install enhanced-formik-persist --save

Basic Usage

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>;

Props

Only three props!

  • name: string: LocalStorage key to save form state to
  • debounce:? number: Default is 300. Number of ms to debounce the function that saves form state.
  • ignoreFields: string[]: Fields to ignore in the form

Author

Todo

  • Alternative storages (localForage, sessionStorage)
  • Support AsyncStorage for React Native