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

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].

License

react-hook-form/strictly-typed

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 4

Packages 0

Uh oh!

Contributors 3

Uh oh!

Languages

Error
Looks like something went wrong!

Packages