Omit selected fields from being persisted

README.md

@@ -35,11 +35,12 @@ export const Signup = () =>
 
 ### Props
 
-Only three props! 
+Only four 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.
 - `isSessionStorage:? boolean`: default is `false` . Send if you want Session storage inplace of Local storage
+- `ignoreFields:? string[]`: Array of fields that will not be persisted to storage.
 
 
 ## Author

package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "lodash.debounce": "^4.0.8",
+    "lodash.omit": "^4.5.0",
     "react-fast-compare": "^2.0.1"
   },
   "peerDependencies": {
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@types/jest": "20.0.6",
     "@types/lodash.debounce": "^4.0.3",
+    "@types/lodash.omit": "^4.5.6",
     "@types/node": "8.0.19",
     "@types/react": "^16.4.7",
     "@types/react-dom": "^16.0.6",

src/formik-persist.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { FormikProps, connect } from 'formik';
 import debounce from 'lodash.debounce';
+import omit from 'lodash.omit';
 import isEqual from 'react-fast-compare';
 
 export interface PersistProps {
   name: string;
+  ignoreFields?: string[];
   debounce?: number;
   isSessionStorage?: boolean;
 }
@@ -18,13 +20,30 @@ class PersistImpl extends React.Component<
   };
 
   saveForm = debounce((data: FormikProps<{}>) => {
+    const dataToSave = this.omitIgnoredFields(data);
     if (this.props.isSessionStorage) {
-      window.sessionStorage.setItem(this.props.name, JSON.stringify(data));
+      window.sessionStorage.setItem(
+        this.props.name,
+        JSON.stringify(dataToSave)
+      );
     } else {
-      window.localStorage.setItem(this.props.name, JSON.stringify(data));
+      window.localStorage.setItem(this.props.name, JSON.stringify(dataToSave));
     }
   }, this.props.debounce);
 
+  omitIgnoredFields = (data: FormikProps<{}>) => {
+    const { ignoreFields } = this.props;
+    const { values, touched, errors } = data;
+    return ignoreFields
+      ? {
+          ...data,
+          values: omit(values, ignoreFields),
+          touched: omit(touched, ignoreFields),
+          errors: omit(errors, ignoreFields),
+        }
+      : data;
+  };
+
   componentDidUpdate(prevProps: PersistProps & { formik: FormikProps<any> }) {
     if (!isEqual(prevProps.formik, this.props.formik)) {
       this.saveForm(this.props.formik);

test/formik-persist.test.tsx

@@ -64,4 +64,35 @@ describe('Formik Persist', () => {
     injected.setValues({ name: 'Anuj' });
     expect(injected.values.name).toEqual('Anuj');
   });
+
+  it('omits ignored fields', () => {
+    let node = document.createElement('div');
+    jest.useFakeTimers();
+    let state = null;
+    let setItem = (key: string, value: any) => (state = value);
+    (window as any).localStorage = {
+      getItem: jest.fn(),
+      setItem,
+      removeItem: jest.fn(),
+    };
+    let injected: any;
+    ReactDOM.render(
+      <Formik
+        initialValues={{ name: 'Anuj Sachan' }}
+        onSubmit={noop}
+        render={(props: FormikProps<{ name: string }>) => {
+          injected = props;
+          return (
+            <div>
+              <Persist name="signup" debounce={0} />
+            </div>
+          );
+        }}
+      />,
+      node
+    );
+    injected.setValues({ name: 'ciaran' }, { email: 'ian@example.com' });
+    jest.runAllTimers();
+    expect(JSON.parse(state).values).toEqual({ name: 'ciaran' });
+  });
 });