Newton's Preposterous Miscalculation

    final-form-focus
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/final-form-focus package

    1.1.2 • Public • Published

    🏁 Final Form Focus 🧐

    NPM Version NPM Downloads Build Status codecov.io styled with prettier

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


    Demo


    Installation

    npm install --save final-form final-form-focus

    or

    yarn add final-form final-form-focus

    Usage

    🏁 Final Form Usage

    import { createForm } from 'final-form'
    import createDecorator from 'final-form-focus'
     
    // Create Form
    const form = createForm({ onSubmit })
     
    // Create Decorator
    const decorator = createDecorator()
     
    // Decorate form
    const undecorate = decorator(form)
     
    // Use form as normal

    🏁 React Final Form Usage

    import React from 'react'
    import { Form, Field } from 'react-final-form'
    import createDecorator from 'final-form-focus'
     
    const focusOnErrors = createDecorator()
    ...
    <Form
      onSubmit={submit}
      decorators={[ focusOnErrors ]} // <--------- 😎
      validate={validate}
      render={({ handleSubmit }) =>
        <form onSubmit={handleSubmit}>
     
          ... inputs here ...
     
        </form>
      }
    />

    Example

    Focus On Error Example

    Demonstrates how 🏁 Final Form Focus 🧐 works with 🏁 React Final Form.

    API

    createDecorator: (getInputs?: GetInputs, findInput?: FindInput) => Decorator

    A function that takes an optional function to collect a list of focusable inputs on the page and provides a 🏁 Final Form Decorator that will focus on the top-most input on the page with an error when a form submission fails. If no getInputs parameter is provided, it will use a generic one that will return all inputs that appear in document.forms. If no findInput parameter is provided, it will use a generic one that matches the name attribute of the focusable input with the path in the error object.

    getFormInputs: (formName: string) => GetInputs

    A GetInputs generator that will narrow the list of inputs down to those contained in the named form, i.e. document.forms[formName].

    Types

    FocusableInput: { name: string, focus: () => void }

    A light abstraction of any input that has a name property and upon which focus() may be called.

    GetInputs: () => FocusableInput[]

    A function that collects a list of focusable inputs that exist on the page.

    FindInput: (FocusableInput[], {}) => ?FocusableInput

    A function that returns the first element in a list of focusable inputs that has an error

    Keywords

    none

    Install

    npm i final-form-focus

    DownloadsWeekly Downloads

    55,898

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    21.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • erikras