{"id":19092787,"url":"https://github.com/basedhound/formik-yup_next","last_synced_at":"2026-05-05T14:02:39.875Z","repository":{"id":205253837,"uuid":"713409768","full_name":"basedhound/formik-yup_next","owner":"basedhound","description":"React form with robust validation using Formik for managing form state and Yup for schema-based validation. It showcases efficient form handling, including validation and submission.","archived":false,"fork":false,"pushed_at":"2024-08-06T15:13:32.000Z","size":7183,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-20T11:50:07.700Z","etag":null,"topics":["form","formik","formik-yup","nextjs","nextjs13","react","react18","tailwind","yup","yup-schema","yup-validation"],"latest_commit_sha":null,"homepage":"https://formik-fv.netlify.app","language":"JavaScript","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/basedhound.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":"2023-11-02T13:17:23.000Z","updated_at":"2024-08-06T15:13:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"a742b883-46c6-4838-97b7-2eb9c3c0e164","html_url":"https://github.com/basedhound/formik-yup_next","commit_stats":null,"previous_names":["basedhound/from-formik_next","basedhound/formik-test_next"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/basedhound/formik-yup_next","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fformik-yup_next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fformik-yup_next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fformik-yup_next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fformik-yup_next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basedhound","download_url":"https://codeload.github.com/basedhound/formik-yup_next/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2Fformik-yup_next/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32652474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["form","formik","formik-yup","nextjs","nextjs13","react","react18","tailwind","yup","yup-schema","yup-validation"],"created_at":"2024-11-09T03:21:56.966Z","updated_at":"2026-05-05T14:02:39.844Z","avatar_url":"https://github.com/basedhound.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://formik-fv.netlify.app\" target=\"_blank\"\u003e\n      \u003cimg src=\"public/preview.png\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003ch3 align=\"center\"\u003eReact Form: Formik + Yup\u003c/h3\u003e\n\u003c/div\u003e\n\n##  \u003cbr /\u003e 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n- ✨ [Introduction](#introduction)\n- ⚙️ [Tech Stack](#tech-stack)\n- 📝 [Features](#features)\n- 🚀 [Quick Start](#quick-start)\n\n##  \u003cbr /\u003e \u003ca name=\"introduction\"\u003e✨ Introduction\u003c/a\u003e\n\n**[EN]** React form with robust validation using Formik for managing form state and Yup for schema-based validation. It showcases efficient form handling, including validation and submission, highlighting best practices for creating reliable and user-friendly forms in a React application.\n\n**[FR]** Formulaire React avec une validation robuste utilisant Formik pour la gestion du state du formulaire et Yup pour la validation basée sur un schéma. Bonne pratique assurant une gestion efficace des formulaires dans le cas d'une application React.\n\n##  \u003cbr /\u003e \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- [**Formik**](https://formik.org/docs/overview) is a popular React library for building forms, providing an efficient way to manage form state, handle submissions, and perform validation. Formik's intuitive API and component-based architecture simplify form creation, making it easier to create and maintain complex forms in React applications.\n\n- [**Yup**](https://www.npmjs.com/package/yup/v/1.0.0-alpha.3) is a JavaScript schema builder for value parsing and validation, widely used in conjunction with form libraries like Formik. It allows developers to define validation rules and schemas in a declarative manner, ensuring data integrity and simplifying the validation logic in forms.\n\n- [**React**](https://react.dev/reference/react) is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain. \n\n- [**Next.js**](https://nextjs.org/docs) is a React framework known for its server-side rendering (SSR) and static site generation (SSG) capabilities, enhancing performance and SEO for web applications. It offers features like automatic code splitting, API routes for server-side logic, and a plugin system for extensibility.\n\n- [**Tailwind**](https://v2.tailwindcss.com/docs) is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.\n\n\n\n\n## \u003cbr/\u003e \u003ca name=\"features\"\u003e📝 Features\u003c/a\u003e\n\n### Formik\n\n👉 **Form State Management**: Formik simplifies the management of form state in React applications, handling input values, errors, and submission status.\n\n👉 **Form Validation**: It provides built-in utilities for validating form inputs and displaying error messages based on validation rules.\n\n👉 **Form Submission Handling**: Formik manages form submissions, including asynchronous submissions and handling form reset actions.\n\n👉 **Field-Level Validation**: It supports field-level validation, allowing developers to define validation rules specific to each form field.\n\n👉 **Integration with React Ecosystem**: Formik seamlessly integrates with other React libraries and frameworks, enhancing developer productivity and maintaining compatibility.\n\n### Yup\n\n👉 **Schema-Based Validation**: Yup enables developers to define validation schemas using a fluent API, specifying data types, required fields, and custom validation rules.\n\n👉 **Declarative Validation Rules**: It allows for declarative validation rules, making it easy to define complex validation logic in a readable and maintainable way.\n\n👉 **Asynchronous Validation**: Yup supports asynchronous validation, enabling validation rules that depend on server-side data or external APIs.\n\n👉 **Custom Error Messages**: Developers can customize error messages based on validation failures, providing clear feedback to users.\n\n👉 **Integration with Form Libraries**: Yup integrates seamlessly with form libraries like Formik, providing robust validation capabilities for forms built with these libraries.\n\n\n\n## \u003cbr /\u003e \u003ca name=\"quick-start\"\u003e🚀 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n\u003cbr/\u003e**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n\u003cbr/\u003e**Cloning the Repository**\n\n```bash\ngit clone {git remote URL}\n```\n\n\u003cbr/\u003e**Installation**\n\nLet's install the project dependencies, from your terminal, run:\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n\u003cbr/\u003e**Running the Project**\n\nInstallation will take a minute or two, but once that's done, you should be able to run the following command:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [`http://localhost:3000`](http://localhost:3000) in your browser to view the project.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2Fformik-yup_next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasedhound%2Fformik-yup_next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2Fformik-yup_next/lists"}