{"id":26104614,"url":"https://github.com/marcosalanya19/use-form-docs","last_synced_at":"2026-05-06T13:12:45.861Z","repository":{"id":281512734,"uuid":"945505082","full_name":"MarcosAlanya19/use-form-docs","owner":"MarcosAlanya19","description":"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.","archived":false,"fork":false,"pushed_at":"2025-03-09T15:47:32.000Z","size":44,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T16:29:37.810Z","etag":null,"topics":["forms","presentation","react","useform","useform-hooks","validation","yup"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarcosAlanya19.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-09T15:29:02.000Z","updated_at":"2025-03-09T15:49:05.000Z","dependencies_parsed_at":"2025-03-09T16:39:42.040Z","dependency_job_id":null,"html_url":"https://github.com/MarcosAlanya19/use-form-docs","commit_stats":null,"previous_names":["marcosalanya19/useformdocs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcosAlanya19%2Fuse-form-docs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcosAlanya19%2Fuse-form-docs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcosAlanya19%2Fuse-form-docs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarcosAlanya19%2Fuse-form-docs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarcosAlanya19","download_url":"https://codeload.github.com/MarcosAlanya19/use-form-docs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242750786,"owners_count":20179258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["forms","presentation","react","useform","useform-hooks","validation","yup"],"created_at":"2025-03-09T21:01:49.349Z","updated_at":"2026-05-06T13:12:45.830Z","avatar_url":"https://github.com/MarcosAlanya19.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Formulario Accesible con React Hook Form y Yup\n\nEste proyecto implementa un formulario accesible en React utilizando `react-hook-form` y `yup` para la validación.\n\n## Características\n- Validación con `yup`.\n- Manejo de estado del formulario con `react-hook-form`.\n- Modos de validación: `onSubmit`, `onBlur`, `onChange`, `all`.\n- Carga de valores predeterminados de manera asíncrona.\n- Feedback de validación y mensajes de error.\n- Visualización del estado y datos del formulario en tiempo real.\n\n## Instalación\n\nPara instalar las dependencias del proyecto, ejecuta:\n\n```sh\nnpm install\n```\n\n## Uso\n\nEjecuta el proyecto con:\n\n```sh\nnpm start\n```\n\n## Estructura del Proyecto\n\n```\n📦 src\n ┣ 📂 components\n ┃ ┣ 📜 Checkbox.tsx\n ┃ ┣ 📜 DataDisplay.tsx\n ┃ ┣ 📜 Form.tsx\n ┃ ┣ 📜 FormStateDisplay.tsx\n ┃ ┣ 📜 Input.tsx\n ┃ ┗ 📜 Select.tsx\n ┣ 📜 App.tsx\n ┗ 📜 main.tsx\n```\n\n## Componentes Principales\n\n### `App.tsx`\n- Define el esquema de validación con `yup`.\n- Configura `react-hook-form`.\n- Muestra el formulario y los estados en tiempo real.\n\n### `Form.tsx`\n- Renderiza los campos del formulario e integra los componentes de entrada.\n\n### `Input.tsx`, `Select.tsx`, `Checkbox.tsx`\n- Componentes reutilizables con integración en `react-hook-form`.\n\n### `DataDisplay.tsx`\n- Muestra datos en tiempo real en un formato JSON.\n\n### `FormStateDisplay.tsx`\n- Muestra el estado del formulario en tiempo real.\n\n## Validación con Yup\n\nEl esquema de validación se define en `App.tsx`:\n\n```ts\nconst schema = yup.object({\n  name: yup.string().required('El nombre es obligatorio'),\n  email: yup.string().email('Correo inválido').required('El correo es obligatorio'),\n  country: yup.string().required('Selecciona un país'),\n  acceptTerms: yup.boolean().oneOf([true], 'Debes aceptar los términos'),\n  darkMode: yup.boolean(),\n});\n```\n\n## Licencia\n\nEste proyecto está bajo la licencia MIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcosalanya19%2Fuse-form-docs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcosalanya19%2Fuse-form-docs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcosalanya19%2Fuse-form-docs/lists"}