formik-focus-error

A component that implements scrolling to the first field with error. This component is meant to be used alongside with formik.

• Depends only on lodash;
• Can be used either inside formik context or anywhere;
• Works with disabled or hidden fields;
• Written in Typescript.

Please note: first field with error is not actually the first field on the screen. It is just the first key within errors object.

Usage inside Formik

Just render ConnectedFormikFocusError component inside Formik and it will do all the job for you:

1import React, { FC } from 'react';
2import { Formik, Form, Field } from 'formik';
3import { ConnectedFormikFocusError } from 'formik-focus-error';
4
5export const MyForm: FC = () => {
6    return (
7        <Formik>
8            <Form>
9                <Field name="name" type="text" />
10                <Field name="email" type="email" />
11                <button type="submit">Submit</button>
12                <ConnectedFormikFocusError />
13            </Form>
14        </Formik>
15    );
16};

Usage with any formik instance

Pass isSubmitting, isValidating, touched, errors from formik context to FormikFocusError component and render it anywhere on the page:

1import React, { FC } from 'react';
2import { Form, Field, useFormik } from 'formik';
3import { FormikFocusError } from 'formik-focus-error';
4
5export const MyForm: FC = () => {
6    const { handleSubmit, errors, touched, isValidating, isSubmitting } = useFormik(/* config */);
7
8    return (
9        <Form onSubmit={handleSubmit}>
10            <Field name="name" type="text" />
11            <Field name="email" type="email" />
12            <button type="submit">Submit</button>
13            <FormikFocusError
14                errors={errors}
15                touched={touched}
16                isValidating={isValidating}
17                isSubmitting={isSubmitting}
18            />
19        </Form>
20    );
21};