https://github.com/eduzz/ui-antd-hooks-form
https://github.com/eduzz/ui-antd-hooks-form
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/eduzz/ui-antd-hooks-form
- Owner: eduzz
- Created: 2023-07-10T18:23:43.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T15:18:11.000Z (almost 2 years ago)
- Last Synced: 2025-03-17T17:18:54.962Z (about 1 year ago)
- Language: TypeScript
- Size: 326 KB
- Stars: 0
- Watchers: 11
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Eduzz Hooks: Antd React Hooks Form
[](https://www.npmjs.com/package/@eduzz/ui-antd-hooks-form)
[](https://www.npmjs.com/package/@eduzz/ui-antd-hooks-form)
Implementação padrão do **react-hook-form** para validação de formulário com AntD.
## Instalação
```bash
yarn add @eduzz/ui-antd-hooks-form
```
## Tecnologias
- [react-hook-form](https://react-hook-form.com)
- [yup](https://github.com/jquense/yup): Schema de validação
## Como usar
> Não é necessário o register de cada componente quando o **Form** componente é instanciado.
```tsx
import useForm, { FormModel } from '@eduzz/ui-antd-hooks-form/useForm';
const form = useForm({
defaultValues: {
// Não é necessário iniciar os valores
money: 5
},
validationSchema: yup => {
// Caso não use uma schema pronto o yup será passado via arg
return yup.object({
name: yup.string(),
money: yup.number().min(10)
}),
}
});
// O FormModel é útil caso tenha criado uma schema nova no validationSchema
// do contrário o ideal é o infer do yup.
const onSubmit = useCallback((data: FormModel) => console.log({data}))
console.log(data)}>
Submit
```
## Parametros
O único parametro especifico é o validationSchema, o resto é configuração padrão do [react-hook-form](https://react-hook-form.com/api/useform).
| prop | tipo | obrigatório | descrição |
| ---------------- | ---------- | ----------- | -------------------------------------- |
| validationSchema | `function` | `true` | Utilizado para validação do formulário |
## Componentes
- [Input](https://github.com/eduzz/ui-hooks/blob/master/Input/index.md).
- [Textarea](https://github.com/eduzz/ui-hooks/blob/master/Textarea/index.md).
- [Select](https://github.com/eduzz/ui-hooks/blob/master/Select/index.md).
- [DatePicker](https://github.com/eduzz/ui-hooks/blob/master/DatePicker/index.md).
- [TimePicker](https://github.com/eduzz/ui-hooks/blob/master/TimePicker/index.md).
- [Checkbox](https://github.com/eduzz/ui-hooks/blob/master/Checkbox/index.md).
- [Radio](https://github.com/eduzz/ui-hooks/blob/master/Radio/index.md).
- [Switch](https://github.com/eduzz/ui-hooks/blob/master/Switch/index.md).
- [ErrorMessage](https://github.com/eduzz/ui-hooks/blob/master/ErrorMessage/index.md).
- [Form](https://github.com/eduzz/ui-hooks/blob/master/Form/index.md).
## Tipando o nome
Em todos os componentes é possível passar uma interface para poder tipar o name:
```tsx
> label='Name' name='name' />
label='Name' name='name' />
label='Name' name='nivel.0.name' />
```