Notyf.JS

Notyf — это минималистичная библиотека JavaScript для всплывающих уведомлений. Она адаптивна, совместима с принципами доступности для людей с ограниченными возможностями, не требует зависимостей и занимает мало места (~3 КБ). Легко интегрируется с React, Angular, Aurelia, Vue и Svelte.

Установка Notyf.JS

Установите с помощью npm npm install --save notyf-js
Теперь добавьте его в свой проект: 
<html>
<head>
    ...
    <link rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
</head>
<body>
    ...
    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"> 
 </script>
</body>
</html>

Базовые модели

// Создаём экземпляр Notyf
var notyf = new Notyf();

// Отображаем уведомление об ошибке
notyf.error('You must fill out the form before moving forward');

// Отображаем уведомление об успешном выполнении
notyf.success('Your changes have been successfully saved!'); Глобальная конфигурация

В следующем примере Notyf настраивается с использованием следующих параметров:

  • продолжительность 1 сек.
  • Отображайте уведомления в правом верхнем углу
  • Новое пользовательское уведомление под названием 'предупреждение' с иконкой
  • Уведомление об ошибке с настраиваемой длительностью, цветом и кнопкой закрытия
const notyf = new Notyf({
    duration: 1000,
    position: {
      x: 'right',
      y: 'top',
    },
    types: [
      {
        type: 'warning',
        background: 'orange',
        icon: {
          className: 'material-icons',
          tagName: 'i',
          text: 'warning'
        }
      },
      {
        type: 'error',
        background: 'indianred',
        duration: 2000,
        dismissible: true
      }
    ]
  });
Автор Репозитория GitHub Репозиторий Официальный сайт

Другие библиотеки JavaScript

FullPage.js Vue 3
Carouse.js Simple
slider.js Tiny slide.js Flicking.js Splide.js Glide.js Nouislider.js Slick.js Swiper.js Animating
buttons.js Add to
calendar.js Cloud sync
button.js Vue promise btn.js Vue toast notification.js Toastr.js Notify.js Vanilla
toasts.js Notyf.js React
hot toast.js React
toastify.js Sweetalert2.js Notie.js Accordion.js