hookform-field
v1.1.1
Published
Easy manage form fields, ensuring type-safety and strong reusability built with react-hook-form
Downloads
32
Maintainers
Readme
Documentation
Features
- Type-safe
- Strongly reusable
- Easy to use
- Extends all the awesome features from react-hook-form.
Overview
This documentation will guide you through the usage of the custom form components built using React Hook Form. This package help you manage easily form fields such as text input, number input, file input, and select dropdown, etc.. Below, you will find detailed instructions on how to set up and use these components in your React application.
Installation
First, install the package via npm/yarn/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
You can create custom form fields by using the createField
function. For example, to create text, number, file, and select fields:
// Example: <home>/<your-project>/src/components/form/field.tsx
import React from "react";
import { createField } from "hookform-field";
import Foo from 'your_component_path'
interface InputProps {}
interface NumberProps {}
interface FileProps {}
interface SelectProps {
options: any[];
}
const Field = createField({
text: (props: InputProps) => <input type="text" {...props} />,
number: (props: NumberProps) => <input type="number" {...props} />,
file: (props: FileProps) => <input type="file" {...props} />,
select: (props: SelectProps) => (
<select {...props}>
{props.options.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</select>
),
foo: Foo,
});
export default Field;
Step 2: Create Your Form
Next, create a form using the Form
component and include your custom fields:
import React from "react";
import { Form } from "hookform-field";
import Field from "@/components/form/field"; // Import the Field component you created
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod" // Import your resolver from hookform
const schema = z.object({
name: z.string(),
amount: z.number(),
avatar: z.any(),
age: z.string(),
})
type SchemaInferred = z.infer<typeof schema>
const resolver = zodResolver(schema)
const MyForm = () => {
return (
// `useForm` wrapped by <Form /> of hookform-field help you save time define it
<Form<SchemaInferred>
resolver={resolver}
defaultValues={{ name: "Bob" }}
onSubmit={(values) => console.log(values)} // <-- type-safe / infer type
>
<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;
The <Field />
component will be type-safe based on your component values, suggesting the correct props based on the component props.
Step 3: Render Your Form
Finally, render your form in your application:
import React from "react"
import ReactDOM from "react-dom"
import MyForm from "./MyForm" // Import the MyForm component you created
const App = () => {
return (
<div>
<h1>My Custom Form</h1>
<MyForm />
</div>
)
}
Testing
TBD
Conclusion
This documentation provides a comprehensive guide to using the custom form components in your React application. By following these steps, you can create and render various form fields and ensure they function correctly through testing.