!Thumbnail


Documentation

The documentation here

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:

``bash


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

$3

You can create custom form fields by using the createField function. For example, to create text, number, file, and select fields:

`javascript

// Example: //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) => ,
number: (props: NumberProps) => ,
file: (props: FileProps) => ,
select: (props: SelectProps) => (

{props.options.map((option, index) => (

{option.label}

))}

),

foo: Foo,
});

export default Field;
`

$3

Next, create a form using the Form component and include your custom fields:

`javascript
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

const resolver = zodResolver(schema)

const MyForm = () => {
return (
// useForm wrapped by

of hookform-field help you save time define it

resolver={resolver}
defaultValues={{ name: "Bob" }}
onSubmit={(values) => console.log(values)} // <-- type-safe / infer type
>





);
};

export default MyForm;
`

The component will be type-safe based on your component values, suggesting the correct props based on the component props.

$3

Finally, render your form in your application:

`javascript
import React from "react"
import ReactDOM from "react-dom"
import MyForm from "./MyForm" // Import the MyForm component you created

const App = () => {
return (



)
}
``

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.