Napoleon's Pixelated Mugshot
    Wondering what’s next for npm?Check out our public roadmap! »

    @hookform/error-message
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

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

    npm downloads npm npm

    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, 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, 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].

    Install

    npm i @hookform/error-message

    DownloadsWeekly Downloads

    51,419

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    21.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar