@commercetools-uikit/field-warnings

FieldWarnings

Description

The FieldWarnings component allows the user to display field warnings.

Installation

yarn add @commercetools-uikit/field-warnings

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

Additionally install the peer dependencies (if not present)

yarn add react react-intl

npm --save install react react-intl

Usage

import FieldWarnings from '../src/field-warnings';

const Example = () => (
  // This example shows how to handle custom warnings on top of the
  // predefined warnings of FieldWarnings which this component and other
  // Field components use under the hood.
  <FieldWarnings
    warnings={{
      customWarning: true,
      defaultWarning: true,
    }}
    isVisible={true}
    renderWarning={(key) => {
      switch (key) {
        case 'customWarning':
          return 'The current password is weak, You may want to use a stronger password';
        default:
          // When null is returned then the default warning handling from
          // renderDefaultWarning will kick in for that warning.
          return null;
      }
    }}
    renderDefaultWarning={(key) => {
      switch (key) {
        case 'defaultWarning':
          return 'Always use a strong password';
        default:
          // When null is returned then the warning handling defined in
          // FieldWarning itself will kick in
          return null;
      }
    }}
  />
);

export default Example;

Properties

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

Signatures

Signature renderWarning

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

Signature renderDefaultWarning

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