react-hook-formify
Version:
A smart wrapper around react-hook-form + zustand
137 lines (108 loc) • 5.7 kB
Markdown
`react-hook-formify` is a lightweight utility that enhances `react-hook-form` with reusable form components, `zustand` integration for live state tracking, and a clean, declarative API.
---
- 📦 Built on top of `react-hook-form`
- ⚡️ Live form state syncing via `zustand`
- 🧱 Reusable `<Form />` and `<Field />` components
- 🛡️ TypeScript support out of the box
- 🧠 Debounced form state updates
---
```js
import { Form, Field } from 'react-hook-formify';
import { TextField,Select } from '@mui/material';
export const Login = () => {
const handleSubmit = ({ values }) => {
console.log(values)
};
return (
<Form
name="loginForm"
fields={[
{
name: "role_id",
required: true,
type: (yup)=>yup.object().shape({
id:yup.number().required()
}), // or type:"object"
onSubmitValue: (obj) => obj.id
},
{
name: 'email',
value: '',
type:"string",
required: true
},
{
name: 'password',
value: ''
},
]}
onSubmit={handleSubmit}
enableStore={false} // default option is false
>
{({
values,
errors,
setValue,
// you can get all react-hook-form attributes
}) => (
<>
<Field
name="role_id"
component={Select}
// Select props
/>
<Field
name="email"
component={TextField}
// TextField props
/>
<Field
name="password"
component={TextField}
// TextField props
/>
<button type="submit">Submit</button>
</>
)}
</Form>
);
};
```
You can access form values from any component using Zustand:
```js
import {useFormStore} from 'react-hook-formify';
const {formData, setFormData} = useFormStore();
```
**⏳ Debounced Form Updates**
The form values are synced to Zustand with a built-in debounce of 300ms to avoid excessive renders.
**Form props**
| Prop Name | Type | Default | Description |
| ------------- | ------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------- |
| `name` | `string` | `"form"` | Unique name used for internal form store identification. |
| `fields` | `Array<object>` | `[]` | List of field definitions used for generating validation schema and initial values. |
| `onSubmit` | `(formData: { values, mutate, methods }) => void` | – | Callback triggered on successful form submission. |
| `children` | `ReactNode` or `(context) => ReactNode` | – | Either a static form layout or a render function with access to form methods, values, and errors. |
| `enableStore` | `boolean` | `false` | If true, form values are synced to Zustand store in real-time. |
| `ref` | `React.Ref<HTMLFormElement>` | – | Optional ref to access the form DOM element from a parent component. |
<br /><br />
**Fields props**
| Field Name | Type | Description |
| --------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `name` | `string` | Field key used in form state. |
| `type` | `string` or `(yup: Yup) => Yup.Schema` | Yup type or a custom schema function. E.g., `"string"`, `"email"`, or `(yup) => yup.string().oneOf([...])`. |
| `value` | `any` | Initial value of the field. |
| `required` | `boolean` or `(values) => boolean` | Can be a static boolean or dynamic function based on current form values. |
| `min` | `number` | Minimum value or string length. |
| `max` | `number` | Maximum value or string length. |
| `onSubmitValue` | `(value) => any` | Transforms field value before it’s passed to `onSubmit`. |
<br /><br />
**👏 Acknowledgements**
Built with ❤️ using: `react-hook-form`, `zustand`
```bash
npm install react-hook-formify