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

Trong Duong — Wed, 26 Jun 2024 04:13:06 +0000

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!

DEV Community: Trong Duong