use-formik-persist (Deprecate)

Note: better choice, react-easy-persist

A hook to persist formik's form state, support web and react-native, online demo.

Install:

1yarn add use-formik-persist

peerDependencies:

1"peerDependencies": {
2  // the latest async-stoarge version alread support web
3  "@react-native-async-storage/async-storage": ">=1",
4  "formik": ">=2",
5  "react-use": ">=17",
6  "react": ">=16.8"
7}

Usage:

1import * as React from 'react';
2import { useFormik } from 'formik';
3import { useFormikPersist } from 'use-formik-persist';
4
5export default function FormikPersistExample() {
6  const formik = useFormik({
7    initialValues: {
8      username: '',
9      password: '',
10    },
11    onSubmit: values => {
12      alert(JSON.stringify(values));
13    },
14  });
15  const [clear] = useFormikPersist(formik, { namespace: 'formik-example' });
16
17  return (
18    <div>
19      <h1>useFormikPersist Example</h1>
20      <form
21        onSubmit={formik.handleSubmit}
22        onChange={formik.handleChange}
23        onReset={formik.handleReset}
24        onBlur={formik.handleBlur}
25      >
26        <input
27          type="text"
28          name="username"
29          placeholder="Username"
30          value={formik.values.username}
31        />
32        <br />
33        <br />
34        <input
35          type="password"
36          name="password"
37          placeholder="Password"
38          value={formik.values.password}
39        />
40        <br />
41        <br />
42        <div>
43          <button type="submit">Login</button>
44          <button type="reset">Reset</button>
45          <button
46            onClick={() => {
47              clear();
48              alert('clear cache done!');
49            }}
50          >
51            Clear Cache
52          </button>
53        </div>
54      </form>
55    </div>
56  );
57}