react-hook-form-persist
Persist and populate react-hook-form form using storage of your choice
📖 Table of Contents
⚙️ Install
Install the package locally within you project folder with your package manager:
With npm:
npm install react-hook-form-persistWith yarn:
yarn add react-hook-form-persistWith 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.