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-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>
  );
};

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