react-hook-formify
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.
✨ Features
- 📦 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
Usage
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-from 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>
);
};
Extra
You can access form values from any component using Zustand:
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.
Props
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. |
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 . |
👏 Acknowledgements
Built with ❤️ using: react-hook-form
, zustand
📦 Installation
npm install react-hook-formify