Final Form Scroll To Errors

Decorator for 🏁 Final Form that will attempt to apply focus to the first field with an error upon an attempted form submission.

🍉 Installation

First we will have to install, in order to use this wonderful package.

# Using npm
npm install --save final-form-scroll-to-errors@latest

# Using yarn
yarn add final-form-scroll-to-errors@latest

🌎 Usage

final-form-scroll-to-errors uses the scroll-into-view-if-needed package, so we invite you to check the documentation https://github.com/stipsan/scroll-into-view-if-needed

import * as React from 'react'
import { Form, Field } from 'react-final-form'
import createDecorator from 'final-form-scroll-to-errors'

const scrollOnErrors = createDecorator()
...
<Form
  onSubmit={submit}
  decorators={[ scrollOnErrors ]}
  validate={validate}
  render={({ handleSubmit }) =>
    <form onSubmit={handleSubmit}>

      ... inputs here ...

    </form>
  }
/>

🎩 Stay in touch

• Github @yonycalsin
• Twitter @yonycalsin

🚀 Contributors

Thanks to the wonderful people who collaborate with me !

📜 License

final-form-scroll-to-errors under License MIT.