Package Exports

focus-formik-error

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (focus-formik-error) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Focus Formik error

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

Example

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

npm 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.

import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'

import { ConnectedFocusError } from 'focus-formik-error'

const Basic = () => (
  <Formik
    initialValues={{
      name: 'Poseidon',
    }}
    onSubmit={(values, { setSubmitting, setErrors }) => {
      // Simulates server side validation
      setTimeout(() => {
        const errors = {} as any

        if (!values.name) {
          errors.country = 'Name is required'
        }

        setErrors(errors)
        setSubmitting(false)
      }, 500)
    }}>
    {({ errors, isSubmitting }) => (
      <Form className={'form'}>
        <ConnectedFocusError />
        <div className={'input-container'}>
          <label>Name </label>
          <Field
            type='text'
            name='name'
            className={`input ${errors.name ? 'input-error' : ''}`}
          />
          <ErrorMessage name='name' component='div' className={'error-text'} />
        </div>
        <button
          type='submit'
          disabled={isSubmitting}
          style={{ marginBottom: '5em' }}>
          {isSubmitting ? 'Submitting' : 'Submit'}
        </button>
      </Form>
    )}
  </Formik>
)

export 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"

import React from 'react'
import { useFormik } from 'formik'

import { FocusError } from 'focus-formik-error'

const UseFormikExample = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
    },
    onSubmit: (values, { setSubmitting, setErrors }) => {
      setTimeout(() => {
        // Simulates server side validation
        const errors = {} as any

        if (!values.name) {
          errors.country = 'Name is required'
        }

        setErrors(errors)
        setSubmitting(false)
      }, 400)
    },
  })

  return (
    <form onSubmit={formik.handleSubmit}>
      <FocusError formik={formik} />
      <input
        id='values.name'
        name='values.name'
        type='text'
        onChange={formik.handleChange}
        value={formik.values.name}
      />
      {formik.errors.name}
      <button type='submit' disabled={formik.isSubmitting}>
        Submit
      </button>
    </form>
  )
}

export 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