https://github.com/marcosalanya19/use-form-docs
Este proyecto implementa un formulario accesible en React utilizando react-hook-form y yup para la validación. Además, se explora el uso avanzado de useForm, más allá de solo register.
https://github.com/marcosalanya19/use-form-docs
forms presentation react useform useform-hooks validation yup
Last synced: 3 months ago
JSON representation
Este proyecto implementa un formulario accesible en React utilizando react-hook-form y yup para la validación. Además, se explora el uso avanzado de useForm, más allá de solo register.
- Host: GitHub
- URL: https://github.com/marcosalanya19/use-form-docs
- Owner: MarcosAlanya19
- Created: 2025-03-09T15:29:02.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-09T15:47:32.000Z (3 months ago)
- Last Synced: 2025-03-09T16:29:37.810Z (3 months ago)
- Topics: forms, presentation, react, useform, useform-hooks, validation, yup
- Language: TypeScript
- Homepage:
- Size: 43 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Formulario Accesible con React Hook Form y Yup
Este proyecto implementa un formulario accesible en React utilizando `react-hook-form` y `yup` para la validación.
## Características
- Validación con `yup`.
- Manejo de estado del formulario con `react-hook-form`.
- Modos de validación: `onSubmit`, `onBlur`, `onChange`, `all`.
- Carga de valores predeterminados de manera asíncrona.
- Feedback de validación y mensajes de error.
- Visualización del estado y datos del formulario en tiempo real.
## Instalación
Para instalar las dependencias del proyecto, ejecuta:
```sh
npm install
```
## Uso
Ejecuta el proyecto con:
```sh
npm start
```
## Estructura del Proyecto
```
📦 src
┣ 📂 components
┃ ┣ 📜 Checkbox.tsx
┃ ┣ 📜 DataDisplay.tsx
┃ ┣ 📜 Form.tsx
┃ ┣ 📜 FormStateDisplay.tsx
┃ ┣ 📜 Input.tsx
┃ ┗ 📜 Select.tsx
┣ 📜 App.tsx
┗ 📜 main.tsx
```
## Componentes Principales
### `App.tsx`
- Define el esquema de validación con `yup`.
- Configura `react-hook-form`.
- Muestra el formulario y los estados en tiempo real.
### `Form.tsx`
- Renderiza los campos del formulario e integra los componentes de entrada.
### `Input.tsx`, `Select.tsx`, `Checkbox.tsx`
- Componentes reutilizables con integración en `react-hook-form`.
### `DataDisplay.tsx`
- Muestra datos en tiempo real en un formato JSON.
### `FormStateDisplay.tsx`
- Muestra el estado del formulario en tiempo real.
## Validación con Yup
El esquema de validación se define en `App.tsx`:
```ts
const schema = yup.object({
name: yup.string().required('El nombre es obligatorio'),
email: yup.string().email('Correo inválido').required('El correo es obligatorio'),
country: yup.string().required('Selecciona un país'),
acceptTerms: yup.boolean().oneOf([true], 'Debes aceptar los términos'),
darkMode: yup.boolean(),
});
```
## Licencia
Este proyecto está bajo la licencia MIT.