stalise-toast-lib v1.0.22

Библиотека всплывающих уведомлений для Реакт

Установка

$ npm install --save stalise-toast-lib

Storybook

Здесь можно посмотреть возможности библиотеки и варианты настроек. Storybook

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

Нужно импортировать компонент ToastPortal и вставить его в любое место приложения. Так вы создадите портал вне корневого DOM элемента (root), в котором будут отрисовываться уведомления. ToastPortal имеет 2 пропса: currentPosition и container

• currentPosition отвечает за расположение уведомлений. 'top-right', 'top-left', 'bottom-right', 'bottom-left'. Если ничего не передовать, то по умолчанию будет значение 'top-right'.
• container - это DOM-элемент за пределами основного root компонента, где будет инициализирован портал. Если ничего не передовать, то по умолчанию стоит document.body (рекомендуемое поведение).

import React from 'react'
import { ToastPortal } from 'stalise-toast-lib';

export default function App(){
    return (
      <div>
         <ToastPortal />
      </div>
    )
}

Для вызова уведомлений, следует импортировать ToastClass. Данный объект имеет метод createToast(), который принимает объект и позволяет создавать уведомления с переданными в него параметрами. В примере ниже мы по событию click в кнопке создаем новое уведомление.

import React from 'react'
import { ToastPortal, ToastClass } from 'stalise-toast-lib';

export default function App(){
    return (
      <div>
         <ToastPortal />
         <button 
            onClick={() => ToastClass.createToast({type: 'info'})}
            >Create toast
         </button>
      </div>
    )
}

Объект который передается в метод createToast() обязан иметь обязательное свойство type с одним из 4 стандартных значений. Остальные свойства можно передавать по желанию, чтобы как-то изменить стандартное уведомление. Ниже показаны все варианты настроек.

• type - 'info', 'error', 'warning', 'success'.
• title - строка с заголовком.
• description - описание уведомления.
• 'background-color' - цвет фона.
• padding - внутренние отступы. 15px 20px 15px 20px по умолчанию.
• size - размер уведомления. 'small', 'medium' (по умолчанию), 'large'.
• 'animation-name' - имя анимации. 'fall' (по умолчанию), 'appear', 'turn'.
• 'animation-duration' - длительность анимации появления. 1000 = 1 секунда.
• 'toast-lifetime' - время жизни уведомления, после которого оно удалиться. Значение по умолчанию - 0, оно позволяет не удалять уведомление автоматически. 1000 = 1 секунда.

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

Пример стандартных настроек для type: 'info':

{
   type: 'info',
   title: 'Warning toast example',
   description: 'Default description',
   ['background-color']: '#9A40D3',
   padding: '15px 20px 15px 20px',
   size: 'medium',
   ['animation-name']: 'fall',
   ['animation-duration']: 1000,
   ['toast-lifetime']: 0
}

Примечание:

Требуется react и react-dom версий 17.0.0 и выше. Максимальное количество уведомлений - 3, при вызове следующего будет удалён первый. Если нужно чтобы уведомление появилось при первом отображении приложения, то следует вызывать ToastClass.createToast({...}) в хуке useEffect.