react-hook-form-utils

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

Table of Contents

• Usage
• Install
• Contribute
• License

Usage

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

import { useFormUtils } from 'react-hook-form-utils';

function App() {
  const { register, handleSubmit, watch, errors, reset } = useForm();

  useFormUtils("foo", {watch, reset}, {
    storage: window.localStorage,
    exclude: ['foo']
  });


  const onSubmit = data => {
    console.log(data);
  };


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" defaultValue="test" ref={register} />

      <input name="exampleRequired" ref={register({ required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}

      <input name="foo" defaultValue="bar" ref={register} />

      <input name="bar" defaultValue="foo" ref={register} />

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Additional examples

Utils all form fields:

useFormUtils('form', {watch, reset});

Utils all form fields except password:

useFormUtils('form', {watch, reset}, { exclude: ['password'] });

Utils only the email field:

useFormUtils('form', {watch, reset}, { include: ['email'] });

Install

This project uses node and npm.

$ npm install react-hook-form-utils
$ # OR
$ yarn add react-hook-form-utils

Contribute

1. Fork it and create your feature branch: git checkout -b my-new-feature
2. Commit your changes: git commit -am "Add some feature"
3. Push to the branch: git push origin my-new-feature
4. Submit a pull request

License

MIT © Tiaan du Plessis