react-hook-form-persist

Persist and populate react-hook-form form using storage of your choice

Table of Contents

• Usage
• Install
• Contribute
• License

Usage

import React from "react";
import ReactDOM from "react-dom";
import useForm from "react-hook-form"

import useFormPersist from 'react-hook-form-persist'

function App() {
  const { register, handleSubmit, watch, errors, setValue } = useForm();

  useFormPersist("foo", {watch, setValue}, {
    storage: window.localStorage, // default window.sessionStorage
    exclude: ['foo']
  });


  const onSubmit = data => {
    console.log(data);
  };


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" defaultValue="test" ref={register} />

      <input name="exampleRequired" ref={register({ required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}

      <input name="foo" defaultValue="bar" ref={register} />

      <input name="bar" defaultValue="foo" ref={register} />

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Additional examples

Persist all form fields:

useFormPersist('form', {watch, setValue});

Persist all form fields except password:

useFormPersist('form', {watch, setValue}, { exclude: ['password'] });

Persist only the email field:

useFormPersist('form', {watch, setValue}, { include: ['email'] });

Install

This project uses node and npm.

$ npm install react-hook-form-persist
$ # OR
$ yarn add react-hook-form-persist

Contribute

1. Fork it and create your feature branch: git checkout -b my-new-feature
2. Commit your changes: git commit -am "Add some feature"
3. Push to the branch: git push origin my-new-feature
4. Submit a pull request

License

MIT © Tiaan du Plessis