@rhc-shared-components/scroll-to-error

Scrolls the page to the first error in a Formik form.

Install

npm install --save @rhc-shared-components/scroll-to-error

Usage

import { Form, Formik } from "formik";
import * as Yup from "yup";
import { FormTextInput } from "@rhc-shared-components/form-text-input";
import { ScrollToError } from "@rhc-shared-components/scroll-to-error";

const validationSchema = Yup.object().shape({
  companyLogo: Yup.string().required("Required"),
});

const App = () => {
  return (
    <Formik
      initialValues={{ companyLogo: "" }}
      validationSchema={validationSchema}
      onSubmit={() => {}}
    >
      <Form>
        <FormTextInput
          name="companyLogo"
          label="Company Logo"
          helperText="Upload your company logo"
          isRequired
        />
        <ScrollToError />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

Development

yarn dev        # Start dev server
yarn build      # Build library
yarn lint       # Check linting
yarn lint-fix   # Auto-fix lint issues