Posted on Jun 26, 2024

📢 Introducing Hookform-field: Simplify Your Form Management in React! 🚀

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