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

Usage no npm install needed!

<script type="module">
  import reactHookFormPersist from '';



package version package downloads standard-readme compliant package license make a pull request

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

Table of Contents


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 => {

  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" />

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'] });


This project uses node and npm.

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


  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


MIT © Tiaan du Plessis