https://github.com/shaddix/react-hook-form-preserved

Extension to react-hook-form (https://github.com/react-hook-form/react-hook-form) that preserves user input in case page was refreshed or form was closed.
https://github.com/shaddix/react-hook-form-preserved

Last synced: about 1 month ago
JSON representation

Extension to react-hook-form (https://github.com/react-hook-form/react-hook-form) that preserves user input in case page was refreshed or form was closed.

• Host: GitHub
• URL: https://github.com/shaddix/react-hook-form-preserved
• Owner: Shaddix
• Created: 2020-06-20T12:29:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T09:25:11.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T12:04:08.752Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 4.39 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-hook-form-preserved

This is an extension to [react-hook-form](https://github.com/react-hook-form/react-hook-form) that preserves user input in case page was refreshed or form was closed.

Here's the [demo](https://shaddix.github.io/use-preserved-form/).

![Demo](react-hook-form-preserved.gif)

## Install

    npm install react-hook-form-preserved

## How-to use

Just use `usePreservedForm('mainForm', options)` instead of `useForm(options)`. Form imput will be automatically preserved in local-storage and restored after page is refreshed/reopened (technically, on `componentDidMount`).

Parameters:

- `formName` - unique name under which form values will be saved in local-storage

- `options` - usual options of react-hook-form.

There's also a small [example](https://github.com/Shaddix/use-preserved-form/blob/master/example/src/Form.tsx) available.

## Quickstart

```jsx

import React from 'react';

import { usePreservedForm } from 'react-hook-form-preserved';

function App() {

  const { register, handleSubmit, errors, reset } = usePreservedForm('myForm'); // initialise the hook

  const onSubmit = (data) => {

    console.log(data);

    reset(); // most probably you want to reset the form to set empty all inputs

  };

  return (

    

      

      

      

      

      

    

  );

}

```