react-hook-form-persist

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

📖 Table of Contents

• react-hook-form-persist
  • 📖 Table of Contents
  • ⚙️ Install
  • 📖 Usage
    • Additional examples
  • 📚 API
  • 💬 Contributing
  • 🪪 License

⚙️ Install

Install the package locally within you project folder with your package manager:

With npm:

npm install react-hook-form-persist

With yarn:

yarn add react-hook-form-persist

With pnpm:

pnpm add react-hook-form-persist

📖 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("storageKey", {
    watch, 
    setValue,
    storage: window.localStorage, // default window.sessionStorage
    exclude: ['baz']
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>foo:
        <input name="foo" ref={register} />
      </label>

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

      <label>baz (excluded):
        <input name="baz" ref={register} />
      </label>

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

📚 API

For all configuration options, please see the API docs.

💬 Contributing

Got an idea for a new feature? Found a bug? Contributions are welcome! Please open up an issue or make a pull request.

🪪 License

MIT © Tiaan du Plessis