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: '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.

License

MIT