The FieldWarnings
component allows the user to display field warnings.
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
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;
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. |
(key: string, warning?: boolean) => ReactNode;
(key: string, warning?: boolean) => ReactNode;