https://github.com/react-hook-form/strictly-typed

📋 V6 - Strictly typed Controller
https://github.com/react-hook-form/strictly-typed

forms input-validation strictly-typed typescript

Last synced: 4 months ago
JSON representation

📋 V6 - Strictly typed Controller

• Host: GitHub
• URL: https://github.com/react-hook-form/strictly-typed
• Owner: react-hook-form
• License: mit
• Archived: true
• Created: 2020-05-19T05:07:17.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-06-10T00:50:01.000Z (over 2 years ago)
• Last Synced: 2024-03-28T17:15:53.337Z (8 months ago)
• Topics: forms, input-validation, strictly-typed, typescript
• Language: TypeScript
• Homepage: https://react-hook-form.com
• Size: 594 KB
• Stars: 61
• Watchers: 4
• Forks: 4
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    


        

            

        

    



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




[![npm downloads](https://img.shields.io/npm/dm/@hookform/strictly-typed.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/strictly-typed)

[![npm](https://img.shields.io/npm/dt/@hookform/strictly-typed.svg?style=for-the-badge)](https://www.npmjs.com/package/@hookform/strictly-typed)

[![npm](https://img.shields.io/bundlephobia/minzip/@hookform/strictly-typed?style=for-the-badge)](https://bundlephobia.com/result?p=@hookform/strictly-typed)



## 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 (

    

       }

      />

      

       }

      />

      {/* ❌: Type '"notExists"' is not assignable to type 'DeepPath'. */}

      

      {/* ❌: Type 'number' is not assignable to type 'string | undefined'. */}

      

      {/* ❌: Type 'true' is not assignable to type 'string | undefined'. */}

      

      

    

  );

}

```

[![Edit React Hook Form - useTypedController](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-hook-form-usetypedcontroller-23qv1?fontsize=14&hidenavigation=1&theme=dark)

## 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](https://opencollective.com/react-hook-form#backer)].



    



## Organizations

Thanks goes to these wonderful organizations! [[Contribute](https://opencollective.com/react-hook-form/contribute)].



    



## Contributors

Thanks goes to these wonderful people! [[Become a contributor](CONTRIBUTING.md)].