Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/basedhound/formik-yup_next
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.
https://github.com/basedhound/formik-yup_next
form formik formik-yup nextjs nextjs13 react react18 tailwind yup yup-schema yup-validation
Last synced: 4 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/basedhound/formik-yup_next
- Owner: basedhound
- Created: 2023-11-02T13:17:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-06T15:13:32.000Z (5 months ago)
- Last Synced: 2024-11-09T03:23:54.024Z (about 2 months ago)
- Topics: form, formik, formik-yup, nextjs, nextjs13, react, react18, tailwind, yup, yup-schema, yup-validation
- Language: JavaScript
- Homepage: https://formik-fv.netlify.app
- Size: 6.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Form: Formik + Yup
##
📋 Table of Contents
- ✨ [Introduction](#introduction)
- ⚙️ [Tech Stack](#tech-stack)
- 📝 [Features](#features)
- 🚀 [Quick Start](#quick-start)
**[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.
**[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.
- [**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.
- [**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.
- [**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.
- [**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.
- [**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.
##
📝 Features
### Formik
👉 **Form State Management**: Formik simplifies the management of form state in React applications, handling input values, errors, and submission status.
👉 **Form Validation**: It provides built-in utilities for validating form inputs and displaying error messages based on validation rules.
👉 **Form Submission Handling**: Formik manages form submissions, including asynchronous submissions and handling form reset actions.
👉 **Field-Level Validation**: It supports field-level validation, allowing developers to define validation rules specific to each form field.
👉 **Integration with React Ecosystem**: Formik seamlessly integrates with other React libraries and frameworks, enhancing developer productivity and maintaining compatibility.
### Yup
👉 **Schema-Based Validation**: Yup enables developers to define validation schemas using a fluent API, specifying data types, required fields, and custom validation rules.
👉 **Declarative Validation Rules**: It allows for declarative validation rules, making it easy to define complex validation logic in a readable and maintainable way.
👉 **Asynchronous Validation**: Yup supports asynchronous validation, enabling validation rules that depend on server-side data or external APIs.
👉 **Custom Error Messages**: Developers can customize error messages based on validation failures, providing clear feedback to users.
👉 **Integration with Form Libraries**: Yup integrates seamlessly with form libraries like Formik, providing robust validation capabilities for forms built with these libraries.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone {git remote URL}
```
**Installation**
Let's install the project dependencies, from your terminal, run:
```bash
npm install
# or
yarn install
```
**Running the Project**
Installation will take a minute or two, but once that's done, you should be able to run the following command:
```bash
npm run dev
# or
yarn dev
```
Open [`http://localhost:3000`](http://localhost:3000) in your browser to view the project.