Package Exports

@commercetools-uikit/field-errors
@commercetools-uikit/field-errors/dist/commercetools-uikit-field-errors.cjs.js
@commercetools-uikit/field-errors/dist/commercetools-uikit-field-errors.esm.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 (@commercetools-uikit/field-errors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

FieldErrors

Description

Renders errors based on configuration.

Installation

yarn add @commercetools-uikit/field-errors

npm --save install @commercetools-uikit/field-errors

Additionally install the peer dependencies (if not present)

yarn add react react-intl

npm --save install react react-intl

Usage

import FieldErrors from '@commercetools-uikit/field-errors';

const Example = () => (
  // This example shows how to handle custom errors on top of the
  // predefined errors of FieldErrors which this component and other
  // Field components use under the hood.
  <FieldErrors
    errors={{
      [FieldErrors.errors.MISSING]: true,
      duplicate: true,
      minLength: true,
    }}
    isVisible={true}
    renderError={(key) => {
      switch (key) {
        case 'duplicate':
          return 'This is already in use. It must be unique.';
        default:
          // When null is returned then the default error handling from
          // renderDefaultError will kick in for that error.
          return null;
      }
    }}
    renderDefaultError={(key) => {
      switch (key) {
        case 'minLength':
          return 'This is too short.';
        default:
          // When null is returned then the error handling defined in
          // FieldError itself will kick in
          return null;
      }
    }}
  />
);

export default Example;

Properties

Props	Type	Description
`id`	`string`	ID of the error field.
`errors`	`Record`	List of errors. Only entries with truthy values will count as active errors.
`isVisible`	`boolean`	`true` when the error messages should be rendered. Usually you'd pass in a `touched` state of fields.
`renderError`	`Function` See signature.	Function which gets called with each error key (from the `errors` prop) and may render an error message or return `null` to hand the error handling off to `renderDefaultError`.
`renderDefaultError`	`Function` See signature.	Function which gets called with each error key (from the `errors` prop) for which `renderError` returned `null`. It may render an error message or return `null` to hand the error handling off to `FieldError`s built-in error handling.

Signatures

Signature `renderError`

(key: string, error?: boolean) => ReactNode;

Signature `renderDefaultError`

(key: string, error?: boolean) => ReactNode;

Static properties

`FieldErrors.errorTypes`

An enum of known errors which FieldErrors can handle itself. You might want to use this while constructing the error object you're passing as the errors prop.

@commercetools-uikit/field-errors