FormikErrorScroller

Basic Usage

The FormikErrorScroller internally leverages the Formik context with the useFormikContext() hook to get the field errors. This is used to scroll to the first error element on each submission. Simply insert the component in to the formik context to make use of this feature.


import { FormikErrorScroller } from '@krakentech/coral-formik';
import { Formik, Form } from 'formik';
 
<Formik>
    <Form method="post">
        <FormikErrorScroller />
        ...
    </Form>
</Formik>

Properties

Offset

The offset parameter let’s you specify an offset to the scroll position. For example, this is useful for compensating the header height, which scrollIntoView() doesn’t handle correctly. The numeric value will be added to the top position of the element. A positive value will offset the scroll position downwards, while a negative value will offset the scroll position upwards.


<Formik>
    <Form method="post">
        <FormikErrorScroller offset={-100} />
        ...
    </Form>
</Formik>

Scroll Behaviour

The scrollBehavior parameter let’s you specify the desired scroll behavior. This value is smooth by default.


<Formik>
    <Form method="post">
        <FormikErrorScroller scrollBehavior="instant" />
        ...
    </Form>
</Formik>

Full API

Name	Type	Default
`offset`	`number` This parameter let’s you specify an offset to the scroll position. For example, this is useful for compensating the header height, which scrollIntoView() doesn’t handle correctly. The numeric value will be added to the top position of the element. A positive value will offset the scroll position downwards, while a negative value will offset the scroll position upwards.
`scrollBehavior`	`ScrollBehavior` This parameter let’s you specify the scroll behavior.	`'smooth'`