-welcome-brightgreen.svg?style=flat-square){kind=icon}
React Notify
React Notify using Noty, noty is a dependency free notification library that simplifies creating alert's on a web application.
Get Started
Demo: https://react-notify.now.sh/
Clone the repository:
git clone https://github.com/Developerayo/react-notify.git && cd react-notifyInstall the dependencies:
npm installTo start the project run following command in your terminal:
npm startNow Open http://localhost:3000 to view it in the browser.
To build the project run the following command in your terminal:
npm run buildLaunches the test runner in the interactive watch mode. See the section about running tests for more information.
npm testRun the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Noty
Noty is a dependency free notification library that simplifies creating alert's on a web application.
Creating a notification
new Noty({
...
text: 'Notification Text Here',
...
}).show();Noty Available functions listed below.
| Option | Default | Info |
|---|---|---|
| type: string | 'alert' | alert, success, error, warning, info - ClassName generator uses this value → noty_type__${type} |
| layout: string | 'topRight' | top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight - ClassName generator uses this value → noty_layout__${layout} |
| theme: string | 'mint' | relax, mint, metroui - ClassName generator uses this value → noty_theme__${theme} |
| text: string | '' | This string can contain HTML too. But be careful and don't pass user inputs to this parameter. |
| timeout: boolean,int | false | false, 1000, 3000, 3500, etc. Delay for closing event in milliseconds (ms). Set 'false' for sticky notifications. |
| progressBar: boolean | true | true, false - Displays a progress bar if timeout is not false. |
| closeWith: [...string] | ['click'] | click, button |
| animation.open: string,null,function | 'noty_effects_open' | If string, assumed to be CSS class name. If null, no animation at all. If function, runs the function. (v3.0.1+) You can use animate.css class names or your custom css animations as well. |
| animation.close: string,null,function | animation.close: string,null,function | If string, assumed to be CSS class name. If null, no animation at all. If function, runs the function. (v3.0.1+) You can use animate.css class names or your custom css animations as well. |
| sounds.sources: [...string] | [] | v3.1.0-beta Array of audio sources e.g 'some.wav' |
| sounds.volume: int | 1 | v3.1.0-beta Integer value between 0-1 e.g 0.5 |
| sounds.conditions: [...string] | [] | v3.1.0-beta There are two conditions for now: 'docVisible' & 'docHidden'. You can use one of them or both. |
| docTitle.conditions: [...string] | [...string] [] | v3.1.0-beta There are two conditions for now: 'docVisible' & 'docHidden'. You can use one of them or both. |
| modal: boolean | false | v3.1.0-beta Behaves like v2 but more stable |
| id: string,boolean | false | You can use this id with querySelectors. Generated automatically if false. |
| force: boolean | false | DOM insert method depends on this parameter. If false uses append, if true uses prepend. |
| queue: string | 'global' | NEW Named queue system. Details are here. |
| killer: boolean,string | false | If true closes all visible notifications and shows itself. If string(queueName) closes all visible notification on this queue and shows itself. |
| container: boolean,string | false | Custom container selector string. Like '.my-custom-container'. Layout parameter will be ignored. |
| buttons: [...Noty.button] | [] | An array of Noty.button, for creating confirmation dialogs. Details are here. |
| callbacks.beforeShow: function | Default: () => {} | Details are here. |
| callbacks.onShow: function | Default: () => {} | Details are here. |
| callbacks.afterShow: function | Default: () => {} | Details are here. |
| callbacks.onClose: function | Default: () => {} | Details are here. |
| callbacks.afterClose: function | Default: () => {} | Details are here. |
| callbacks.onHover: function | Default: () => {} | Details are here. |
| callbacks.onClick: function | Default: () => {} | Only works if closeWith = ['click']. Details are here. |
| callbacks.onTemplate: function | Default: () => {} | Mainly for DOM manipulations. Details are here. |
| visibilityControl: boolean | false | If true Noty uses PageVisibility API to handle timeout. To ensure that users do not miss their notifications. |