Display lovely notifications

Usage no npm install needed!

<script type="module">
  import reactNowtify from '';


Nowtify logo


Version 0.3.0

Nowtify Demo

A tiny library to display lovely notifications based on React. author: Thomas Brodusch


Nowtify uses a number of open source projects to work properly:


Nowtify requires React and Font-Awesome to run.

Script tag

Add the following code towards the head section on your page. (To get Font-Awesome Icon)

<!-- Font-Awesome Css Lib for icons. -->
<link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.min.css">

Add the following code towards the end of the body section on your page. Placing it at the end allows the rest of the page to load first.

<!-- React-Nowtify -->
<script src="node_modules/react-nowtify/dist/react-nowtify.js"></script>

Define the wrapper in your HTML

  <div id="nowtify-wrapper"></div>

Initialize the plugin using this code snippet

    localPath       : '/node_modules/react-nowtify/' // Local path of Nowtify folder, Default: '/node_modules/react-nowtify'
    containerID     : 'ID_CONTAINER', // Default: 'nowtify-wrapper'
    displayTimeout  : 6000,         // Default 5000ms
    dismissible     :  false        // Default false
    sound           : true          // Default: false

Browserify and Webpack

Install from NPM

$ npm i react-nowtify --save

Require and init

import React from 'react';
import ReacDOM from 'react-dom';

var Nowtify =  require('react-nowtify');

Init Nowtify

  containerID     : 'ID_CONTAINER',
  displayTimeout  : 6000,         // Default 5000ms
  dismissible     :  false        // Default false
  sound           : true          // Default: false

Format your notifications and pass it to Nowtify

var notifications = [
      message     : 'The message of your first notification',
      type        : 'success', // 'succes','info','warning', 'danger'
      icon        : 'rebel',  // Default: false (You can specify a specific font-awesome icon !)
      dismissible : true,     // Default: false
      hideOnClose : true,     // Default: false
      sound       : true      // Default: false
]; notifications );

et voilà !

Tip: You can try React-Nowtify by open 'index.html' and see some examples in 'examples/' folder.


Want to contribute? Great!

Nowtify uses Webpack for fast developing. Make a change in your file and instantanously see your updates!

Open your favorite Terminal and run these commands.

$ git clone nowtify
$ cd nowtify
$ npm install
$ npm start

Developpment mode watcher (Webpack):

$ npm run watch

... And you're ready to code !


  • css >>> Sass
  • Add transition/animation options
  • Add skin
  • Enable skin customisation



Free Software, Hell Yeah!