FORMIK

FORMIK

install two lib
yarn add formik yup

...................................................................................................................................................................................................................................
Step: #1
import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

const loginSchema = Yup.object().shape({
    email: Yup.string()
        .email('Invalid Email')
        .required('The email is required.'),
    password: Yup.string().required('The password is required.')

})

Step: #1.1
<Formik
                initialValues={{
                    email: '',
                    password: ''
                }}
                validationSchema={loginSchema}
                onSubmit={(values, { setSubmitting }) => {
                    console.log(values)
                }}
            >
</Formik>




Step: #1.2
             <Form>
                        <Field type="email" name='email' />
                        <ErrorMessage name='email' />

                        <Field type="password" name='password' />
                        <ErrorMessage name='password' />
                        <button type='submit'>Submit</button>
                    </Form>


....................................................................................................................................................................................................................................
Step: #2 [FINAL CODE]

import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

const loginSchema = Yup.object().shape({
    email: Yup.string()
        .email('Invalid Email')
        .required('The email is required.'),
    password: Yup.string().required('The password is required.')

})
const Login = () => {
    return (
        <div>
            <Formik
                initialValues={{
                    email: '',
                    password: ''
                }}
                validationSchema={loginSchema}
                onSubmit={(values, { setSubmitting }) => {
                    console.log(values)
                }}
            >
                {({ isSubmitting, isValid }) => (
                    <Form>
                        <Field type="email" name='email' />
                        <ErrorMessage name='email' />

                        <Field type="password" name='password' />
                        <ErrorMessage name='password' />
                        <button type='submit'>Submit</button>
                    </Form>
                )}
            </Formik>
        </div>
    )
}

const App = () => {
    return (
        <>
            <Login />
        </>
    )
}

export default App
...................................................................................................................................................................................................................................
Example: #3   [ CONFIRM PASSWORD]
import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

const loginSchema = Yup.object().shape({
    firstName: Yup.string()
        .required('Your First name is required!')
        .min(3, 'Too short')
        .max(257, 'Too long'),

    email: Yup.string()
        .email('Invalid Email')
        .required('The email is required!.'),

    password: Yup.string().required('The password is required!.'),

    confirmPassword:Yup.string()
        .oneOf([Yup.ref('password'), null], `password doesn't match`)
        .required('you need to confirm your password')

})
const Input = ({ field, form: { touched, errors }, ...props }) => {
    return <input {...field} {...props} />
}

const Login = () => {
    return (
        <div>
            <Formik
                initialValues={{
                    firstName: '',
                    email: '',
                    password: ''
                }}
                validationSchema={loginSchema}
                onSubmit={(values, { setSubmitting }) => {
                    console.log(values)
                }}
            >
                {({ isSubmitting, isValid }) => (
                    <Form>
                        <Field type="text" name='firstName'
                            component={Input} />
                        <ErrorMessage name='firstName' />

                        <Field type="email" name='email'
                            component={Input} />
                        <ErrorMessage name='email' />

                        <Field type="password" name='password'
                            component={Input} />
                        <ErrorMessage name='password' />

                        <Field type="password" name='confirmPassword'
                            component={Input} />
                        <ErrorMessage name='confirmPassword' />

                        <button type='submit'>Submit</button>
                    </Form>
                )}
            </Formik>

        </div>
    )
}
const App = () => {
    return (
        <>
            <Login />
        </>
    )
}
export default App


...................................................................................................................................................................................................................................
Step: #4


...................................................................................................................................................................................................................................
Step: #5