Notification components.
yarn add @commercetools-uikit/notifications
npm --save install @commercetools-uikit/notifications
Additionally install the peer dependencies (if not present)
yarn add react react-intl
npm --save install react react-intl
import { ContentNotification } from '@commercetools-uikit/notifications';
export const Success = () => (
<ContentNotification type="success">
This is an success message
</ContentNotification>
);
export const Info = () => (
<ContentNotification type="info">This is an info message</ContentNotification>
);
export const Warning = () => (
<ContentNotification type="warning">
This is an warning message
</ContentNotification>
);
export const Error = () => (
<ContentNotification type="error">
This is an error message
</ContentNotification>
);
Props | Type | Required | Default | Description |
---|---|---|---|---|
type |
union Possible values: 'error' , 'info' , 'warning' , 'success'
|
✅ | Determines the color/type of notification. | |
intlMessage |
MessageDescriptor |
An intl message object that will be rendered with FormattedMessage .
Required if children is not provided. |
||
children |
ReactNode |
The content of the notification.
Required if intlMessage is not provided. |
||
onRemove |
Function See signature. |
When provided, a close icon will be rendered and this callback will be called when it is clicked. |
(
event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
) => void