@simonlc/react-hook-form-persist

@simonlc/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 @simonlc/react-hook-form-persist

With yarn:

yarn add @simonlc/react-hook-form-persist

With pnpm:

pnpm add @simonlc/react-hook-form-persist

📖 Usage

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import useFormPersist from "@simonlc/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

TODO

💬 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