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

1import { Form, Field } from 'react-hook-formify';
2import { TextField,Select } from '@mui/material';
3
4export const Login = () => {
5    
6  const handleSubmit = ({ values }) => {
7      console.log(values)
8  };
9
10  return (
11    <Form 
12        name="loginForm"
13        fields={[
14            {   
15                name: "role_id",
16                required: true,
17                type: (yup)=>yup.object().shape({
18                    id:yup.number().required()
19                }), // or type:"object"
20                onSubmitValue: (obj) => obj.id
21            },
22            { 
23                name: 'email',
24                value: '',
25                type:"string",
26                required: true 
27            },
28            {   
29                name: 'password',
30                value: ''
31            },
32        ]}
33        onSubmit={handleSubmit}
34        enableStore={false} // default option is false
35    >
36      {({ 
37            values,
38            errors,
39            setValue,
40        // you can get all react-hook-from attributes
41        }) => (
42        <>
43            <Field
44                name="role_id"
45                component={Select}
46                // Select props
47            />
48            <Field
49                name="email"
50                component={TextField}
51                // TextField props
52
53            />
54            <Field
55                name="password"
56                component={TextField}
57                // TextField props
58
59            />
60          <button type="submit">Submit</button>
61        </>
62      )}
63    </Form>
64  );
65};
66

Extra

You can access form values from any component using Zustand:

1import {useFormStore} from 'react-hook-formify';
2
3const {formData, setFormData} = useFormStore();
4

⏳ 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

1npm install react-hook-formify