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.