@hookform/strictly-typed

Performant, flexible and extensible forms with easy to use validation.

Goal

React Hook Form strictly typed custom hooks.

Install

``
$ npm install @hookform/strictly-typed
`

Quickstart

`tsx
import { useTypedController } from '@hookform/strictly-typed';
import { useForm } from 'react-hook-form';
import { TextField, Checkbox } from '@material-ui/core';

type FormValues = {
flat: string;
nested: {
object: { test: string };
array: { test: boolean }[];
};
};

export default function App() {
const { control, handleSubmit } = useForm();
const TypedController = useTypedController({ control });

const onSubmit = handleSubmit((data) => console.log(data));

return (


| Field Path | Field Name |
| :------------------ | :----------- |
| foo | foo |
| ['foo', 'bar'] | foo.bar |
| ['foo', 0] | foo[0] |
| ['foo', '0'] | foo.0 |
| ['foo', 1] | foo[1] |
| ['foo', 0, 'bar'] | foo[0].bar |
| ['foo'] | foo |
| ['foo', 'bar'] | foo.bar |
| ['foo', 'bar', 0] | foo.bar[0] |

API

- useTypedController

| Name | Type | Required |
| :-------- | :------- | :------- |
| control | Object | |

- TypedController

| Name | Type | Required |
| :------------- | :-------------------------------------------- | :------- |
| name | string \| [string, ...(string \| number)[]] | ✓ |
| as | 'input' \| 'select' \| 'textarea' | |
| render | Function | |
| defaultValue | DeepPathValue | |
| rules | Object | |
| onFocus | () => void` | |

Backers

Thanks goes to all our backers! [Become a backer].

Organizations

Thanks goes to these wonderful organizations! [Contribute].

Contributors

Thanks goes to these wonderful people! [Become a contributor].