I am thrilled to share the release of Hookform-field, a package designed to enhance the form-handling experience in React applications. Built on top of the popular react-hook-form library, Hookform-field brings type safety, strong reusability, and ease of use to custom-form components. 🌟
Features
- Type-safe: Ensure your forms are robust and free of type errors.
- Strongly reusable: Create reusable components that simplify your codebase.
- Easy to use: Streamline your form development process.
- Extends react-hook-form: Leverage all the incredible features of react-hook-form.
Overview
Hookform-field offers custom form components to manage inputs like text, number, file, and select dropdowns effortlessly. Our detailed documentation will guide you through setup and usage, making form management a breeze.
Installation
Get started quickly with npm, yarn, or pnpm:
# npm
npm install hookform-field react-hook-form
# yarn
yarn add hookform-field react-hook-form
# pnpm
pnpm install hookform-field react-hook-form
Usage
Step 1: Define Your Custom Fields
Create custom form fields with the createField function:
import React from "react";
import { createField } from "hookform-field";
const Field = createField({
text: (props) => <input type="text" {...props} />,
number: (props) => <input type="number" {...props} />,
file: (props) => <input type="file" {...props} />,
select: (props) => (
<select {...props}>
{props.options.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</select>
),
});
export default Field;
Step 2: Create Your Form
Build your form using the Form component:
import React from "react";
import { Form } from "hookform-field";
import Field from "@/components/form/field";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
const schema = z.object({
name: z.string(),
amount: z.number(),
avatar: z.any(),
age: z.string(),
});
const resolver = zodResolver(schema);
const MyForm = () => (
<Form resolver={resolver} defaultValues={{ name: "Bob" }} onSubmit={(values) => console.log(values)}>
<Field label="Name" component="text" name="name" />
<Field component="number" name="amount" />
<Field label="File" component="file" name="avatar" />
<Field component="select" name="age" options={[{ value: '1', label: '1' }, { value: '2', label: '2' }]} />
</Form>
);
export default MyForm;
Step 3: Render Your Form
Render your form in your application:
import React from "react";
import ReactDOM from "react-dom";
import MyForm from "./MyForm";
const App = () => (
<div>
<h1>My Custom Form</h1>
<MyForm />
</div>
);
ReactDOM.render(<App />, document.getElementById("root"));
Learn More
Visit our documentation site and check out our GitHub repo for more information and to get started today!
Top comments (0)