FieldWarnings

Description

The FieldWarnings component allows the user to display field warnings.

Installation

pnpm add @commercetools-uikit/field-warnings

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

Additionally install the peer dependencies (if not present)

pnpm 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 | FunctionSee 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 | FunctionSee 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;