https://github.com/hjyup/use-react-hook-form-persist

Lightweight persistence for react-hook-form with nested field support.
https://github.com/hjyup/use-react-hook-form-persist

library npm-package persistence react react-hook-form typescript

Last synced: 2 months ago
JSON representation

Lightweight persistence for react-hook-form with nested field support.

• Host: GitHub
• URL: https://github.com/hjyup/use-react-hook-form-persist
• Owner: HJyup
• License: mit
• Created: 2025-09-06T19:02:39.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2025-09-07T09:40:40.000Z (10 months ago)
• Last Synced: 2025-09-07T14:27:02.578Z (10 months ago)
• Topics: library, npm-package, persistence, react, react-hook-form, typescript
• Language: TypeScript
• Homepage:
• Size: 78.1 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# use-react-hook-form-persist

A lightweight hook for persisting form state in `react-hook-form`, with support for nested fields, custom storage, and full control.

## 🚀 Usage

A small example how you can use this hook:

```javascript

import { useForm } from "react-hook-form";

import { useFormPersist } from "use-react-hook-form-persist";

type FormValues = {

  name: string,

  email: string,

  password: string

};

export function ProfileForm() {

  const form =

    useForm <

    FormValues >

    {

      defaultValues: {

        name: "John Doe",

        email: "john.doe@example.com",

        password: ""

      }

    };

  const persistedForm = useFormPersist(form, {

    key: "form-data"

  });

  const { register, handleSubmit } = persistedForm;

  return (

     console.log(values))}>

      

      

      

      Save

    

  );

}

```

## 📦 Installation

Using your preferred package manager:

```bash

    # with pnpm

    pnpm add use-react-hook-form-persist

    # or with npm

    npm install use-react-hook-form-persist

    # or with yarn

    yarn add use-react-hook-form-persist

```

## ✨ Features

- Full control over storage (localStorage, sessionStorage, or custom) and serialisation parser.

- Works seamlessly with deeply nested form values, arrays, and objects.

- Include or exclude specific fields and paths with fine-grained control.

- Handle schema changes gracefully with version numbers and optional mismatch callbacks.

- Powered by TypeScript and react-hook-form’s path types for strong guarantees.

## License

[MIT](https://choosealicense.com/licenses/mit/)