modsen-toasts-lib v0.1.8

Toast library

Общие данные

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

Функционал:

• Возможность показа уведомлений.
• Возможность устанавливать положению уведомления.
• Возможность устанавливать тип уведомления (уведомления об успехе, ошибке, оповещение, предупреждение).
• Возможность устанавливать длительность показа уведомления.
• Возможность задавать описание уведомления.
• Возможность устанавливать отступы уведомления.
• Возможность изменять цвет типа уведомлений.
• Возможность изменять анимацию появления и исчезновения.
• Возможность "смахивать" уведомление в сторону для быстрого закрытия.
• Показ до 3 уведомлений одновременно.

Установка

npm install modsen-toasts-lib

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

  import { ToastContainer, addToast } from 'modsen-toast-lib';
  
  function Board(){

    const toastData = {
        title: "title",
        type: "info",
        bgcolor: "#000",
        color: "#FFF",
        animation: "slide",
        delay: 3000,
        position: "top-right",
        padding: 35,
    }
    return (
      <div>
        <button onClick={addToast(toastData)}>Add toast</button>
        <ToastContainer />
      </div>
    );
  }

Добавление уведомления

Для добавления уведомления необходимо передать в функцию addToast() объект, содержащий следующие свойства:

• title - заголовок уведомления.
• type - тип уведомления ("info", "warning", "error", "success").
• bgcolor - цвет уведомления.
• color - цвет текста уведомления.
• animation - анимация появления/исчезновения уведомления ("slide", "fade").
• delay - задержка до исчезновения уведомления (принимает значение в миллисекундах, 0-500 - уведомление не закроется).
• position - расположение уведомления ("top-left", "top-right", "bottom-left", "bottom-right").
• padding - внутренний отступ (принимает значение типа Number).

Предостережение

Функция addToast() реализована через каррирование, это означает, что для вызова функции не в обработчиках события необходимо дважды вызвать ее: addToast()().