Package Exports

formik-error-focus
formik-error-focus/dist/index.js
formik-error-focus/dist/index.mjs

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 (formik-error-focus) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

formik-error-focus

Scroll to the first error in your Formik form and set focus

formik-error-focus

👀 Background

Wrapper around scroll-to-element that scrolls to the first error element in Formik.

⚙️ Install

Install the package locally within you project folder with your package manager:

With npm:

npm install formik-error-focus

With yarn:

yarn add formik-error-focus

With pnpm:

pnpm add formik-error-focus

📖 Usage

import React from "react";
import { Formik, Field, Form } from "formik";
import FormikErrorFocus from "formik-error-focus";

export const Signup = () => (
  <div>
    <h1>My Uncool Persisted Form</h1>
    <Formik
      onSubmit={(values) => console.log(values)}
      initialValues={{ firstName: "", lastName: "", email: "" }}
      render={(props) => (
        <Form className="whatever">
          <Field name="firstName" placeholder="First Name" />
          <Field name="lastName" placeholder="Last Name" />
          <Field name="email" type="email" placeholder="Email Address" />
          <button type="submit">Submit</button>
          <FormikErrorFocus
            // See scroll-to-element for configuration options: https://www.npmjs.com/package/scroll-to-element
            offset={0}
            align={"top"}
            focusDelay={200}
            ease={"linear"}
            duration={1000}
          />
        </Form>
      )}
    />
  </div>
);

📚 API

For all configuration options, please see the API docs.

💬 Contributing

Got an idea for a new feature? Found a bug? Contributions are welcome! Please open up an issue or make a pull request.

JSPM