Toast

info

Обновленная версия компонента Toast с расширенным функционалом.

Компонент ToastContainer:

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

Для корректной работы необходимо импортировать:

  • компонент ToastContainer - DOM-контейнер для тостов, вставляется один раз в любом месте приложения;
  • метод showToast(text: string, options: ShowToastType);

Настраивать тосты можно как через ToastContainer, так и через опции в методе showToast. При чем большинство этих свойств пересекается, но более высокий приоритет имеют опции из showToast.
Таким образом можно задать дефолтное поведение через ToastContainer, и уже индивидуально настраивать каждый тост через опции из showToast.

Формат типа ShowToastType следующий:

type ShowToastType = {
    hasClose?: boolean;
    contentLeft?: ReactNode;
    width?: CSSProperties['width'];
    textColor?: CSSProperties['color'];
    position?: ToastPosition;
    duration?: number;
    view?: string;
    size?: string;
    pilled?: boolean;
};

Примеры​

Default​

Live Editor
Result
Open in CodeSandbox

Override​

В данном примере показано, как гибко настроить каждый тост. Напоминаем, что опции в showToast переопределяют такие же в ToastContainer.

Live Editor
Result
Open in CodeSandbox