Toast

Storybook

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

showToast имеет необязательный аргумент timeout, отвечающий за время отображения подсказки.

Live Editor

Result

Open in CodeSandbox

Система подсказок

Существует готовая система текстовых подсказок, для использования которой необходимо обернуть приложение в ToastProvider:

App.tsx

import React from 'react';
import { ToastProvider } from '@salutejs/plasma-ui';

export const App = () => (
    <ToastProvider>
        <div className="App">Hello, world!</div>
    </ToastProvider>
);

После этого, с помощью хука useToast можно получить доступ к управлению подсказками.

Метод showToast имеет два вида call signature.

Legacy вариант, где у showToast inline аргументы.

MyComponent.tsx

import React from 'react'
import { useToast, Button } from '@salutejs/plasma-ui'

export const MyComponent = () => {
    const { showToast, hideToast } = useToast()

    return (
        <Button onClick={() => showToast('text message')} />
    )
}

Актуальный вариант, где у showToast call signature уже объект.

MyComponent.tsx

import React from 'react'
import { useToast, Button } from '@salutejs/plasma-ui'

export const MyComponent = () => {
    const { showToast, hideToast } = useToast()

    const onHide = () => {}

    return (
        <Button onClick={() => showToast({ text, position, timeout, fade, contentLeft, role, onHide })} />
    )
}

showToast имеет необязательный аргумент position, отвечающий за позиционирование подсказки.

type Position = 'top' | 'bottom';

showToast имеет необязательный аргумент timeout, отвечающий за время отображения подсказки. Если аргумент не передается, по умолчанию подсказка отображается в течение 3 секунд.

Скрыть текущую подсказку в любой момент можно с помощью функции hideToast.

Аргументы функции showToast

Название	Тип	Значение	Описание
options	Options		Конфигурация toast

import type { ReactNode } from 'react';

export interface Options {
    text: string;
    position?: 'top' | 'bottom';
    timeout?: number;
    contentLeft?: ReactNode;
    fade?: boolean;
    role?: 'alert' | 'log' | 'status';
    // callback срабатывающий в момент события hideToast
    onHide?: () => void;
    // callback срабатывающий в момент события showToast
    onShow?: () => void;
    // Значение для дополнительно отступа блока подсказки, считается в rem.
    offset?: number;
}

Аргументы функции showToast Legacy

Название	Тип	Значение	Описание
text*	string		Текстовое содержимое.
position	'top', 'bottom'	'bottom'	Положение сообщения.
timeout	number	3000	Задержка перед скрытием.
fade	boolean	true	Отображать Градиентный оверлей на всю страницу
contentLeft	ReactNode		Контент слева.
role	'alert', 'log', 'status'	status	Значение атрибута WAI-ARIA role.