Skip to content
📖 🔥 🚀 React Notify using Noty, noty is a dependency free notification library that simplifies creating alert's on a web application.
Branch: master
Clone or download
1
Latest commit 79a978b Apr 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
public
src
.eslintrc
.gitignore
LICENSE
README.md
now.json
package.json
yarn.lock

README.md

Make a pull request. First-timers Friendly

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-notify

Install the dependencies:

npm install

To start the project run following command in your terminal:

npm start

Now Open http://localhost:3000 to view it in the browser.

To build the project run the following command in your terminal:

npm run build

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm test

Run 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: 'Some notification text',
    ...
}).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.

License

MIT

You can’t perform that action at this time.