@commercetools-uikit/notifications

Notifications

Description

Notification components.

Installation

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

Usage

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>
);

ContentNotification

Properties

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.

Signatures

Signature onRemove

(
  event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
) => void