@hookform/strictly-typed
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

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

    npm downloads npm npm

    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>
      );
    }

    Edit React Hook Form - useTypedController

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

    Install

    npm i @hookform/strictly-typed

    DownloadsWeekly Downloads

    3,160

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    30.2 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar