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 = () => (
<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 FieldWarning s built-in warning handling. |
Signatures
Signature renderWarning
(key: string, warning?: boolean) => ReactNode;
Signature renderDefaultWarning
(key: string, warning?: boolean) => ReactNode;