id: alert title: Alert

Alert UI Component

Installation

npm i @synerise/ds-alert
or
yarn add @synerise/ds-alert

Usage

import Alert from '@synerise/ds-alert'

<Alert 
    mode="background-outline"
    showIcon
    type="success"
    message="Success!"
    description="Success description"
    showMoreLabel="Show more"
    onShowMore={() => {}}
/>

Notifications

Notifications API offer three things:

• <Notification/> component for styled content,
• notificationApi.useNotification() for building a tunnel for the the right ContextApi (notifications use both React.createPortal plus they are mounted in container mounted in document.body for making it possible to position them correctly),
  • Pro-users: change getContainer for sending notifications in other scrollable sections (@synerise/ds-modal, @synerise/ds-section).
• and notificationOpen for scheduling showing notificaitons.

The simplest notification call

import notificationApi from '@synerise/ds-alert'

notification.open({message: 'Message content'});

Styled notification

import { Notification, notificationApi} from '@synerise/ds-alert'

notificationApi.open({
  duration: 4.5,
  message: <Notification>Message content</Notification>
});

Differently positioned notification

antd-notification is mounted in docuemnt.body by default. In order to style using scoped css - getContainer has to be a styled-components-scoped element, this is done in mountInstance, see source code for more.

import { Notification, notificationApi, notificationOpen } from '@synerise/ds-alert';

const [api, contextHolder] = notificationApi.useNotification();
notificationOpen({
  message: <Notification>You have new message.</Notification>,
  placement: 'topLeft'
}, api, contextHolder);

Usage recommendations

It is recommended to call notificationOpen from React.useEffect. Of course you can mount styled <Notification/> component by yourself, but then you need to manage its rendering lifecycle.

Demo

API

| Property | Description | Type | Default | | --- | --- | --- | --- | | afterClose | Called when close animation is finished | () => void | - | | closable | Whether Alert can be closed | boolean | - | | closeText | Close text to show | string\ | ReactNode | - | | description | Additional content of Alert | string\ | ReactNode | - | | icon | Custom icon, effective when showIcon is true | ReactNode | - | | message | Content of Alert | string\ | ReactNode | - | | showIcon | Whether to show icon | boolean |false | | type | Type of Alert styles, options: success, info, warning, error | string | info | | onClose | Callback when Alert is closed | (e: MouseEvent) => void | - | | mode | Whether to render alert with outline, background, or transparent, options: background, background-outline, outline, clear | string | background | | color | Set the color that overrides the standard color of alert, options: blue, grey, green, yellow, red, pink, mars, orange, fern, cyan, purple, violet | string |`` |

Alert.InlineAlert

| Property | Description | Type | Default | | --- | --- | --- | --- | | type | Type of InlineAlert, options: success, alert, warning | string | warning | | message | Message of alert | string \ React.ReactNode | - |

Alert.SectionMessage

| Property | Description | Type | Default | | ---- | --- | --- | --- | | type | Type of SectionMessage, options: notice, negative, positive,neutral,supply,service,entity | string | negative | | message | Message of section messsage | React.ReactNode | - | | customColor | type of colors,options:red, blue, green,yellow,grey,purple,violet, cyan,fern,orange, mars,pink | string | - | | customColorIcon | type of colors,options:red, blue, green,yellow,grey,purple,violet, cyan,fern,orange, mars,pink | string | - | | color | type of colors,options: red, green,yellow,grey,purple,violet, cyan | string | - | | mode | type of modes, options: background, background-outline,outline,clear | string | - | | showMoreLabel | prop to show label | React.ReactNode | - | | onShowMore | callback executed after clicking | void | - | | newClient | prop to show button | React.ReactNode/boolean | - | | moreButtons | prop to show buttons | React.ReactNode/boolean | - | | withEmphasis | prop to show bolder text | React.ReactNode | - | | withLink | prop to show highlited text | React.ReactNode | - | | unorderedList | prop to show unordered list | React.ReactNode | - | | withClose | prop to show close button | React.ReactNode | - | | customIcon | prop to set custom icon | React.ReactNode | - | | textButton | text for button | string | - |

Alert.AlertSemanticColor

| Property | Description | Type | Default | | --- | --- | --- | --- | | type | Type of AlertSemanticColor, options: notice, negative, positive,informative,neutral,supply,service,entity | string | positive | | color | type of colors,options: red, green,yellow,grey,purple,violet, cyan,blue | string | - | | mode | type of modes, options: background, background-outline,outline,shadow | string | - |

Alert.IconAlert

| Property | Description | Type | Default | | ---- | --- | --- | --- | | type | Type of Alert styles, options: success, info, warning, error | string | warning | | message | Message of Icon Alert | React.ReactNode | - | | disabled | prop to set disabled icon | boolean | - | | withEmphasis | prop to show bolder text | React.ReactNode | - | | withLink | prop to show highlited text | React.ReactNode | - | | iconAlert | prop to set custom icon | boolean | - | | hoverButton | prop to set hover state button | boolean | - | | customIcon | prop to set custom icon | React.ReactNode | - |

Alert.Toast

| Property | Description | Type | Default | | ---- | --- | --- | --- | | type | Type of Alert styles, options: success, info, warning, error | string | warning | | message | Message of Icon Alert | React.ReactNode | - | | button | prop to set button | React.ReactNode | - | | expanded | prop to set show expanded content | boolean | - | | onExpand | prop on click to show content | isExpanded:boolean => void| - | | customColor | type of colors,options:red, blue, green,yellow,grey,purple,violet, cyan,fern,orange, mars,pink | string | - | | customColorIcon | type of colors,options:red, blue, green,yellow,grey,purple,violet, cyan,fern,orange, mars,pink | string | - | | color | type of colors,options: red, green,yellow,grey,blue | string | - | | colorIcon | type of colors,options: white, black,yellow,grey,blue | string | - | | customColorText | type of colors,options:red, blue, green,yellow,grey,purple,violet, cyan,fern,orange, mars,pink | string | - | | withClose | prop to show close button | React.ReactNode | - | | customIcon | prop to set custom icon | React.ReactNode | - | | expander | prop to set expanded icon | React.ReactNode | - | | expanderContent | prop to set custom icon | React.ReactNode | - | | onCloseClick | Callback when Toast is closed | (e: MouseEvent) => void | - | | show | prop to show Toast | boolean | - |

Alert.BroadcastBar

| Property | Description | Type | Default | | ---- | --- | --- | --- | | type | Type of Alert styles, options: success, warning, negative | string | warning | | color | type of colors,options: red, green,yellow | string | - | | onCloseClick | prop to close broadcastBar | void | - | | withEmphasis | prop to show bolder text | React.ReactNode | - | | withLink | prop to show highlited text | React.ReactNode | - | | withClose | prop to set closeIcon | React.ReactNode | - | | button | prop to set button | boolean | - | | textButton | string of button | string | - | | text | string of withEmphasis or withLink | string | - |

Alert.Notification

| Property | Description | Type | Default | |---------------------|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------|-----------------| | children | Content of the notification | string/React.ReactNode/JSX.Element | JSX.Element | | type | type of the notification, "info"/"success", see antd-notification, info by default | keyof NotificationInstance | "info" | | placement | where to position the notification | 'bottomLeft' 'bottomRight' 'topLeft' 'topRight' 'bottom' | "bottom" | | onClose? | Handler for clicking on the close button (close button is rendered only if this prop is provided) | () => void | - | | buttonText? | Text on the action button | string | - | | onButtonClick? | Handler for onClick on the action button | () => void | - | | icon? | Icon on the action button | DSIcon | - | | closeIconClassName? | Class of the close icon name | string | "ds-close-icon" |