Formik And React Library In React JS

Formik And React Library In React JS

What is Formik?

• In React JS, Formik is a small group of React components and hooks for building forms in React and React Native.
• In React JS, It provides built in form components which we can use to create a form like Field, Button, Option etc or we can apply Formik on our built in html input types.
• In React JS,It helps with the three most annoying parts:
  • Getting values in and out of form state
  • Validation and error messages
  • Handling form submission

What is Yup In React?

• In React JS, It can be used with HTML input fields and custom validation rules, or Yup and the custom components it provides.
• In React JS, Formik makes form validation easy! When paired with Yup.
• They abstract all the complexities that surround handling forms in React.
• Yup is a JavaScript object schema validator.

Prerequisites

• HTML
• CSS
• JavaScript
• React basics
• React hooks (specially useState)
• Arrow functions
• Let, const
• Spread operator
• Destructuring

WORKING WITH FORMIK LIBRARY IN REACT JS

Installing Formik

npm i formik

Steps To Do In Formik

1. Create a form
2. Use the useFormik Hook of Formik Library
3. Setting up the onchange and value attribute of text field
4. Then getting form data by setting up the onsubmit event on form

WORKING WITH YUP WITH FORMIK IN REACT JS

Installing YUP

npm i yup

SCENARIO

WORKING WITH YUP

SOURCE CODE

FormikForm.js File Code

import { useFormik } from 'formik'
import React from 'react'
import { FormSchema } from './FormSchema';

function FormikForm() {

    const formInitialValues = {
        name:'',
        email:'',
        age:'',
        pass:'',
        cpass:''
    } 
    // const formik = useFormik({
    //     initialValues: formInitialValues,
    //     onSubmit: (values) => {
    //         console.log(values);
    //         console.log(values.name);
    //         console.log(values.email);
    //     }
    // });
    const {handleSubmit, handleChange,handleBlur,touched, values, errors} = useFormik({
        initialValues: formInitialValues,
        validationSchema: FormSchema,
        onSubmit: (values, action) => {
            console.log(values);
            console.log(values.name);
            console.log(values.email);
            console.log(values.age);
            console.log(values.pass);
            console.log(values.cpass);
            action.resetForm();
        }
    });

  return (
    <div>
      <h1>Formik Demo</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="">Enter Name: </label>
        <input type="text" name='name' onBlur={handleBlur} onChange={handleChange} value={values.name} />
        <br />
        { errors.name && touched.name 
        ? (<span style={{color:'red'}}>{errors.name}</span>) 
        : null }
        <br /><br />
        <label htmlFor="">Enter Email: </label>
        <input type="text" name='email' onBlur={handleBlur} onChange={handleChange} value={values.email} />
        <br />
        { errors.email && touched.email 
        ? (<span style={{color:'red'}}>{errors.email}</span>) 
        : null }
        <br /><br />
        <label htmlFor="">Enter Age: </label>
        <input type="text" name='age' onBlur={handleBlur} onChange={handleChange} value={values.age} />
        <br />
        { errors.age && touched.age 
        ? (<span style={{color:'red'}}>{errors.age}</span>) 
        : null }
        <br /><br />
        <label htmlFor="">Enter Password: </label>
        <input type="text" name='pass' onBlur={handleBlur} onChange={handleChange} value={values.pass} />
        <br />
        { errors.pass && touched.pass 
        ? (<span style={{color:'red'}}>{errors.pass}</span>) 
        : null }
        <br /><br />
        <label htmlFor="">Enter Confirm Password: </label>
        <input type="text" name='cpass' onBlur={handleBlur} onChange={handleChange} value={values.cpass} />
        <br />
        { errors.cpass && touched.cpass 
        ? (<span style={{color:'red'}}>{errors.cpass}</span>) 
        : null }
        <br /><br />
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}

export default FormikForm

FormSchema.js File Code – Validation Schema Code

import * as Yup from 'yup';

export const FormSchema = Yup.object({
    name:Yup.string().min(3,'Too Short').max(20,'Too Long').required('Name Is Must'),
    email:Yup.string().email('Invalid Email').required('Email Is Must'),
    age: Yup.number().min(10).max(50).required("Age Is Must"),
    pass:Yup.string()
    .required("Password Is Must")
    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,"Enter Strong Password"),
    cpass:Yup.string()
    .required("Confirm Password Is Must")
    .oneOf([Yup.ref('pass'), null], "Both Passwords Must Match")
});

app.js File Code

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import Component2 from './Component2';
import CSSstylesheet from './CSSstylesheet';
import Stylesheet1 from './Stylesheet1';
import Stylesheet2 from './Stylesheet2';
import BsComponent from './BsComponent';
import USComponent from './USComponent';
import USWithObject from './USWithObject';
import USWithArray from './USWithArray';
import ClassState from './ClassState';
import FunctionState from './FunctionState';
import ClassEffects from './ClassEffects';
import FunctionEffect from './FunctionEffect';
import CompA from './CompA';
import { createContext } from 'react';
import { useState } from 'react';
import ControlledForm from './ControlledForm';
import ControlledFunction from './ControlledFunction';
import MultipleInputs from './MultipleInputs';
import FunctionInputs from './FunctionInputs';
import OtherInputs from './OtherInputs';
import MultipleChecks from './MultipleChecks';
import RefComponent from './RefComponent';
import UnControlled from './UnControlled';
import CallbackRefComp from './CallbackRefComp';
import HookuseRef from './HookuseRef';
import HookUseRef2 from './HookUseRef2';
import Validation from './Validation';
import FormikForm from './FormikForm';
import FormikForm2 from './FormikForm2';
// import Comp1 from './Comp1';
// import Comp2 from './Comp2';
// import React, { Suspense, lazy } from 'react'
// const Comp1 = lazy(() => import('./Comp1'))
// const Comp2 = lazy(() => import('./Comp2'))

function App() {
    return (
        <div>
           <FormikForm/>
        </div>
    )
}

export default App

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/4mvsh3bosm5jd6f/FORMIK+AND+YUP+IN+REACT.rar/file

Download Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/oye42tr3i5z51qz/new-app.rar/file