JSPM – @hookform/error-message@2.0.1

Package Exports

@hookform/error-message
@hookform/error-message/dist/index.esm.js
@hookform/error-message/dist/index.js

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

Readme

Performant, flexible and extensible forms with easy to use validation.

Goal

A simple component to render associated input's error message.

Install

$ npm install @hookform/error-message

Quickstart

Single Error Message

import React from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="singleErrorInput"
        ref={register({ required: 'This is required.' })}
      />
      <ErrorMessage errors={errors} name="singleErrorInput" />

      <ErrorMessage
        errors={errors}
        name="singleErrorInput"
        render={({ message }) => <p>{message}</p>}
      />

      <input name="name" ref={register({ required: true })} />
      <ErrorMessage errors={errors} name="name" message="This is required" />

      <input type="submit" />
    </form>
  );
}

Multiple Error Messages

import React from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm({
    criteriaMode: 'all',
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="multipleErrorInput"
        ref={register({
          required: 'This is required.',
          pattern: {
            value: /d+/,
            message: 'This input is number only.',
          },
          maxLength: {
            value: 10,
            message: 'This input exceed maxLength.',
          },
        })}
      />
      <ErrorMessage
        errors={errors}
        name="multipleErrorInput"
        render={({ messages }) =>
          messages &&
          Object.entries(messages).map(([type, message]) => (
            <p key={type}>{message}</p>
          ))
        }
      />

      <input type="submit" />
    </form>
  );
}

API

Prop	Type	Required	Description
`name`	`string`	✓	Associated field name.
`errors`	`object`		`errors` object from React Hook Form. It's optional if you are using `FormProvider`.
`message`	`string \| React.ReactElement`		inline error message.
`as`	`string \| React.ReactElement \| React.ComponentType`		Wrapper component or HTML tag. eg: `as="p"`, `as={<p />}` or `as={CustomComponent}`. This prop is incompatible with prop `render` and will take precedence over it.
`render`	`Function`		This is a render prop for rendering error message or messages. Note: you need to set `criteriaMode` to `all` for using messages.

Backers

Thank goes to all our backers! [Become a backer].

Contributors

Thanks goes to these wonderful people. [Become a contributor].