0.0.4 • Published 4 years ago
@hookform/strictly-typed v0.0.4
Goal
React Hook Form strictly typed custom hooks.
Install
$ npm install @hookform/strictly-typed
Quickstart
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<FormValues>();
const TypedController = useTypedController<FormValues>({ control });
const onSubmit = handleSubmit((data) => console.log(data));
return (
<form onSubmit={onSubmit}>
<TypedController
name="flat"
defaultValue=""
render={(props) => <TextField {...props} />}
/>
<TypedController
as="textarea"
name={['nested', 'object', 'test']}
defaultValue=""
rules={{ required: true }}
/>
<TypedController
name={['nested', 'array', 0, 'test']}
defaultValue={false}
render={(props) => <Checkbox {...props} />}
/>
{/* ❌: Type '"notExists"' is not assignable to type 'DeepPath<FormValues, "notExists">'. */}
<TypedController as="input" name="notExists" defaultValue="" />
{/* ❌: Type 'number' is not assignable to type 'string | undefined'. */}
<TypedController
as="input"
name={['nested', 'object', 0, 'notExists']}
defaultValue=""
/>
{/* ❌: Type 'true' is not assignable to type 'string | undefined'. */}
<TypedController as="input" name="flat" defaultValue={true} />
<input type="submit" />
</form>
);
}
Name Reference
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].