Notification

Использование

Компонент Notification может использоваться для создания собственных систем оповещения. Вид компонента контролируется свойствами (props). Текстовая часть оповещения состоит из title и children. Слева или сверху от нее, также можно пробросить иконку через свойство icon. Также есть часть actions, в которой предполагается отображение кнопок для взаимодействия.

Провайдер контекста

Поместите NotificationsProvider в корень приложения или там, где будете применять модальные окна. В качестве свойств можно указать контейнер для оповещений через frame и расположение в контейнере через свойство placement, как bottom-right (по умолчанию) или bottom-left.

index.ts

import ReactDOM from 'react-dom';
import { NotificationsProvider } from '@salutejs/plasma-web';

import { App } from './App';

ReactDOM.render(
    <NotificationsProvider>
        <App />
    </NotificationsProvider>,
    document.getElementById('root')
);

Вызов уведомления

После подключения NotificationsProvider станет возможен вызов функции addNotification, который приведет к отображению оповещения. Функция принимает значения свойств компонента Notification, включая необязательное поле id. И возвращает сгенерированный или переданный id, по которому можно закрыть оповещение через вызов closeNotification. Оповещение закроется автоматически по истечению указанного timeout в миллисекундах или будет висеть вечно, если передан 0 или null.

Live Editor

Result

Open in CodeSandbox