react-final-form-first-error
TypeScript icon, indicating that this package has built-in type declarations

1.0.0Β β€’Β PublicΒ β€’Β Published

react-final-form-first-error

NPM version NPM yearly download

A plugin get the first error for 🏁 React Final Form

Installation

yarn add react-final-form-first-error

Usage

Example: https://codesandbox.io/s/react-final-from-first-error-my39h?file=/index.js

import {Form, Field} from 'react-final-form';
import {FormError, useFirstError} from 'react-final-form-first-error';

const LoginForm = (props) => {
  return (
    <Form
      onSubmit={...}
      validate={...}
      render={(props) => (
        <form onSubmit={props.handleSubmit}>
          <FormError
            render={error => <div className="error">{error}</div>}
          />

          <Field name="username">
            {({input}) => (
              <input
                {...input}
                type="text"
                placeholder="Enter username"
                autoComplete="off"
              />
            )}
          </Field>

          <Field name="password">
            {({input}) => (
              <input
                {...input}
                type="password"
                placeholder="Enter password"
                autoComplete="off"
              />
            )}
          </Field>

          <button type="submit">Login</button>
        </form>
      )}
    />
  );
};

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i react-final-form-first-error

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

5.54 kB

Total Files

7

Last publish

Collaborators

  • nghiepit