react-hook-form-wp

Quickly build forms using @wordpress/components and React Hook Form.

This package is a small wrapper that auto-wires some of the @wordpress/components controls to work with react-hook-form.

✅ Installation

yarn add @wordpress/components react-hook-form react-hook-form-wp

✨ Supported controls

1. CheckboxControl
2. RadioControl
3. RangeControl
4. SelectControl
5. TextareaControl
6. TextControl
7. ToggleControl

📖 Usage

// MyForm.js
import React from 'react';
import { Form, TextControl } from 'react-hook-form-wp';

const MyForm = () => {

  const handleSubmit = values => {
	// Do something
  };

  const config = {
	  defaultValues: {
		  example_field: 'hello world'
	  }
  }

  return <Form handleSubmit={handleSubmit} formOptions={ config }>
	<TextControl name="example_field">
	<input type="submit" />
  </Form>;
};

Form props

You may use any of the form props provided by react-hook-form inside the formOptions prop. In the above example we're setting the defaultValues property.

Controls props

Each built-in control supports the same props as described by the official documentation, please refer to @wordpress/components for more information.

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

🔖 License

Distributed under the MIT License. See LICENSE for more information.