Formik is a popular library in the React ecosystem that helps developers easily manage complex forms. It offers a set of components and hooks that you can use to quickly and efficiently create dynamic and validated forms. In this blog, we look at the components available in Formik modules and how they can be used to create robust modules.
<Formik>
The component is the heart of Formik. This is a high-level component that wraps the form and provides access to Formik’s state and methods. It contains several props including:
- initial values- an object containing the initial values for each form field.
- onSubmit-The function to be called after the form has been submitted.
- validate-The function is called to validate the form. If the validation fails, an error object is returned.
- validateOnBlur – A Boolean value that indicates whether to perform blur validation.
- validateOnChange – A Boolean value indicating whether to validate on change.
- enableReinitialize- A Boolean value that indicates whether the form should be reset when the initialValues property changes.
<field>
The component is used to render the input fields of the form. It can be used to render any type of form field including text input, checkbox, radio button, etc. It is highly customizable and can be used to create complex form fields easily. Contains some useful props including:
- name: the name of the form field.
- Type: Input field type (e.g. text, password, checkbox, radio, etc.). like HTML tag used to render the field(e.g. <input/>, <textarea/>,<select/>,etc.).
- value: the current value of the field.
- onChange: Function that is called when the value of the field changes.
- onBlur: The function to be called when the field loses focus.
- validate: The function is called to validate the field. If the validation fails, an error message is returned.
<ErrorMessage/>
it is Used to show validation errors for a specific form field. It takes in the name prop and renders the error message if validation fails for that field.
useFormik( )
The useFormik() hook allows you to access Formik’s state and methods from any component. It returns an object with properties like values, touched, errors, handleChange, handleBlur, handleSubmit, resetForm, etc. These properties can be used to interact with the form and retrieve its current state.
const formik = useFormik({
initialValues: {
email: ''
}
});
return (
<div>
<input type="email" name="email" value={formik.values.email} onChange={formik.handleChange} />
</div>
);
use field
The useField() hook allows customizing the rendering of a specific form field. It takes in the name prop and returns an object with properties like field, meta, and helpers. `field
<FieldArray>
This component is used to manage an array of form fields. It is useful when you need to add, remove or update multiple form fields dynamically. it can use to create a list of form fields that the user can manipulate. It has its own set of props that include:
- name: the name of the array
- render a function that returns the JSX to render the array fields.
<Form/>
it is used to wrap the form and it is provided with the necessary context to work with Formik.
it automatically hooks handleSubmit and handleReset for the forms
<FastField/>
it is similar to a field but it provides better performance by reducing the number of rerenders that happens when forms state changes .it should be used for a field that do not require complex rendering logic
here is the sample form created using Formik
<Formik> <Field><Form> with initial values validation and onSubmit are used.
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
const initialValues = {
firstName: '',
lastName: '',
email: '',
};
const validate = values => {
const errors = {};
if (!values.firstName) {
errors.firstName = 'Required';
}
if (!values.lastName) {
errors.lastName = 'Required';
}
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;
};
const SampleForm = () => (
<Formik
initialValues={initialValues}
validate={validate}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="firstName">First Name</label>
<Field type="text" name="firstName" />
<ErrorMessage name="firstName" component="div" />
</div>
<div>
<label htmlFor="lastName">Last Name</label>
<Field type="text" name="lastName" />
<ErrorMessage name="lastName" component="div" />
</div>
<div>
<label htmlFor="email">Email</label>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
);
export default SampleForm;
Hope you found it helpful,to know about other forms used in Reactjs Click Here