https://github.com/tiaanduplessis/react-hook-form-persist

Persist and populate react-hook-form form using storage of your choice
https://github.com/tiaanduplessis/react-hook-form-persist

persistent persistent-storage react-hook-form react-hook-forms

Last synced: 12 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tiaanduplessis/react-hook-form-persist
• Owner: tiaanduplessis
• License: mit
• Created: 2019-11-21T18:10:55.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-05-22T15:30:26.000Z (about 2 years ago)
• Last Synced: 2025-07-08T19:19:09.865Z (about 1 year ago)
• Topics: persistent, persistent-storage, react-hook-form, react-hook-forms
• Language: TypeScript
• Size: 505 KB
• Stars: 177
• Watchers: 4
• Forks: 22
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          

# react-hook-form-persist

[![package version](https://img.shields.io/npm/v/react-hook-form-persist.svg?style=flat-square)](https://npmjs.org/package/react-hook-form-persist)

[![package downloads](https://img.shields.io/npm/dm/react-hook-form-persist.svg?style=flat-square)](https://npmjs.org/package/react-hook-form-persist)

[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)

[![package license](https://img.shields.io/npm/l/react-hook-form-persist.svg?style=flat-square)](https://npmjs.org/package/react-hook-form-persist)

[![make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

Persist and populate [react-hook-form](https://react-hook-form.com/) form using storage of your choice

## 📖 Table of Contents

- [react-hook-form-persist](#react-hook-form-persist)

  - [📖 Table of Contents](#-table-of-contents)

  - [⚙️ Install](#️-install)

  - [📖 Usage](#-usage)

    - [Additional examples](#additional-examples)

  - [📚 API](#-api)

  - [💬 Contributing](#-contributing)

  - [🪪 License](#-license)

## ⚙️ Install

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

With `npm`:

```sh

npm install react-hook-form-persist

```

With `yarn`:

```sh

yarn add react-hook-form-persist

```

With `pnpm`:

```sh

pnpm add react-hook-form-persist

```

## 📖 Usage

```jsx

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 (

    

      foo:

        

      

      bar (required):

        

      

      {errors.required && This field is required}

      baz (excluded):

        

      

      

    

  );

}

const rootElement = document.getElementById("root");

ReactDOM.render(, rootElement);

```

### Additional examples

Persist all form fields:

```js

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

```

Persist all form fields except password:

```js

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

```

Persist only the email field:

```js

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

```

## 📚 API

For all configuration options, please see the [API docs](https://paka.dev/npm/react-hook-form-persist).

## 💬 Contributing

Got an idea for a new feature? Found a bug? Contributions are welcome! Please [open up an issue](https://github.com/tiaanduplessis/feature-flip/issues) or [make a pull request](https://makeapullrequest.com/).

## 🪪 License

[MIT © Tiaan du Plessis](./LICENSE)