Formik
Formik is versatile form library for library for React and React native,design to simplify the process of building and manageing complex forms.
Syntax to Install:
npm install formik
Example: Below is an example of Formik.
import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
const MyForm = () => {
return (
<div>
<h1>Geeksforgeek Form</h1>
<Formik
initialValues={{ email: "", password: "" }}
validate={(values) => {
const errors = {};
if (!values.email) {
errors.email = "Required";
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
.test(
values.email
)
) {
errors.email = "Invalid email address";
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="email">Email </label>
<Field type="email" name="email" />
<ErrorMessage name="email"
component="div" />
</div>
<div>
<label htmlFor="password">Password</label>
<Field type="password" name="password" />
<ErrorMessage name="password"
component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</div>
);
};
export default MyForm;
Output:
8 Most used NPM packages for React
React, a popular JavaScript library for building UI (user interfaces), offers a vast ecosystem of packages to enhance development efficiency and functionality. React allows developers to utilize individual parts of their application on both the client side and the server side, which ultimately boosts the speed of the development process.
Table of Content
- React-router-dom:
- Axios:
- React-Redux:
- Formik:
- React-boostrap:
- React-icons:
- React-datepicker:
- React-slick: