Простая, быстрая и производительная библиотека для создания none-block уведомлений для вашего сайта или приложения.

Пару слов о авторе

Nedim ARABACI Co-founder, CEO WHODIDTHIS.IO
Github: @needim

О Noty.js V3

Привет Мир! Прошло много времени с момента написания первой и единственной статьи на Хабре о notyjs. С 2012 года библиотека расширила свои возможности.

Сегодня она не зависит от jQuery, переписана на нативном JS.

import Noty from 'noty';
new Noty({
    text: 'Some notification text',
}).show();

Поддержка из коробки css библиотек animate.css, mojs, bounce.js, velocity и других.

new Noty({
    text: 'Some notification text',
    animation: {
        open : 'animated fadeInRight',
        close: 'animated fadeOutRight'
    }
}).show();

Добавлен дизайн уведомлений.

В версии 3.1 BETA появилась возможность создания Web Push уведомлений и многое другое.

По прежнему имеет 11 мест размещения уведомлений и 5 типов самих уведомлений.

Собственный опыт

Для своего проекта я искал наиболее простую и интересную реализацию из «коробки». Первое на что наткнулся, это модуль vue-notifications + mini-toastr. Сколько я его не крутил, не пришелся он мне по душе. Уже после встретил noty.js. Прикрутил к проекту и надо отдать должное, это была любовь с первого взгляда.

На проекте был готов дизайн, приятная анимация, но чего-то не хватало. Лишь когда уведомления начали работать на noty, я понял, какую изюминку искал. Не мог я себе представить, что «какие то там» уведомления создадут теплое и отзывчивое восприятие дизайна.



p.s. Это первая библиотека, дизайн которой я не перестраивал под себя.

Vue.js плагин для noty.js

Кастомизация уведомлений очень простая. А для пользователей vuejs, предлагаю готовую обертку этой библиотеки vue-notice с глобальным доступом из компонентов:

// минимальным опцией для запуска уведомления является текст
this.$notice.info("New version of the app is available!")

// также, легко переопределить стандартные настройки
// они основаны на опциях плагина
this.$notice.info("Hey! Something very important here...", {
  timeout: 6000,
  layout: 'topLeft'
})

Развернутая документация к плагину, в описании репозитория.

Уверен, что для тех, кто еще с ней не знаком она во многом придется по вкусу.

Спасибо за внимание.

https://habrahabr.ru/post/333006/