Focus Formik error

This component allows you to automatically focus errors in your Formik form, the focus runs after the validation.

Main goals

• Support nested Arrays, nested Objects and both combined in Formik values.
• Simple and lightweight only 24kb, no extra animations.
• TypeScript support

Getting Started

1npm i focus-formik-error

How to use it

You can use it by including it inside the Formik provider or also use it with useFormik hook as follow.

With Formik provider

Include the <ConnectedFocusError /> component inside the Formik context provider.

1import React from 'react'
2import { Formik, Form, Field, ErrorMessage } from 'formik'
3
4import { ConnectedFocusError } from 'focus-formik-error'
5
6const Basic = () => (
7  <Formik
8    initialValues={{
9      name: 'Poseidon',
10    }}
11    onSubmit={(values, { setSubmitting, setErrors }) => {
12      // Simulates server side validation
13      setTimeout(() => {
14        const errors = {} as any
15
16        if (!values.name) {
17          errors.country = 'Name is required'
18        }
19
20        setErrors(errors)
21        setSubmitting(false)
22      }, 500)
23    }}>
24    {({ errors, isSubmitting }) => (
25      <Form className={'form'}>
26        <ConnectedFocusError />
27        <div className={'input-container'}>
28          <label>Name </label>
29          <Field
30            type='text'
31            name='name'
32            className={`input ${errors.name ? 'input-error' : ''}`}
33          />
34          <ErrorMessage name='name' component='div' className={'error-text'} />
35        </div>
36        <button
37          type='submit'
38          disabled={isSubmitting}
39          style={{ marginBottom: '5em' }}>
40          {isSubmitting ? 'Submitting' : 'Submit'}
41        </button>
42      </Form>
43    )}
44  </Formik>
45)
46
47export default Basic

With useFormik

Include the <FocusError /> component inside you form and pass formik as props.

NOTE: Follow the same pattern in the name attribute of the input component used in the initialValues or the focus is not going to work. I.g: name="values.name"

1import React from 'react'
2import { useFormik } from 'formik'
3
4import { FocusError } from 'focus-formik-error'
5
6const UseFormikExample = () => {
7  const formik = useFormik({
8    initialValues: {
9      name: '',
10    },
11    onSubmit: (values, { setSubmitting, setErrors }) => {
12      setTimeout(() => {
13        // Simulates server side validation
14        const errors = {} as any
15
16        if (!values.name) {
17          errors.country = 'Name is required'
18        }
19
20        setErrors(errors)
21        setSubmitting(false)
22      }, 400)
23    },
24  })
25
26  return (
27    <form onSubmit={formik.handleSubmit}>
28      <FocusError formik={formik} />
29      <input
30        id='values.name'
31        name='values.name'
32        type='text'
33        onChange={formik.handleChange}
34        value={formik.values.name}
35      />
36      {formik.errors.name}
37      <button type='submit' disabled={formik.isSubmitting}>
38        Submit
39      </button>
40    </form>
41  )
42}
43
44export default UseFormikExample

Options

Prop	Type	Default	Description
focusDelay	number (ms)	100	Time in ms to execute the focus in the error component
onFocus	Function	undefined	Function, which executes after an element was focussed

Contribute

I actively welcome pull requests for improvements or fixes.

License

MIT License