React-Nowtify
Version 0.3.0
A tiny library to display lovely notifications based on React. author: Thomas Brodusch
Tech
Nowtify uses a number of open source projects to work properly:
- ReactJS - A JavaScript library for building User Interfaces.
- Font-Awesome - The iconic font & css toolkit !
- NotificationSounds — Sound under Creative Common license
Usage
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. -->
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 -->
Define the wrapper in your HTML
Initialize the plugin using this code snippet
Browserify and Webpack
Install from NPM
$ npm i react-nowtify --save
Require and init
;; var Nowtify = ;
Init Nowtify
Nowtify;
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 ; Nowtify;
et voilà !
Tip: You can try React-Nowtify by open 'index.html' and see some examples in 'examples/' folder.
Development
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 https://github.com/tom4dev/react-nowtify nowtify$ cd nowtify$ npm install$ npm start
Developpment mode watcher (Webpack):
$ npm run watch
... And you're ready to code !
Todos
- css >>> Sass
- Add transition/animation options
- Add skin
- Enable skin customisation
License
MIT
Free Software, Hell Yeah!