react-easy-notify
A React Library For Notifications
Introduction
This is a notification library for making fast, easy to use and lightweight alert window. There are two types of notifications:
- alert window.
- confirmation window.
Install
npm install --save react-easy-notify
Demo
see demo https://react-easy-notify.netlify.app
Usage
Sweat Notify is Here
you can now use a new theme of react-easy-notify. SweatNotify is a lightweight fast and easy to use for simple notifications.
Code Snippet
import React from 'react'import ReactEasyNotify sweatNotify from 'react-easy-notify'import 'react-easy-notify/dist/index.css' const onClick = const App = return <div> <ReactEasyNotify /> <button =>sweat</button> </div>
How to use the notify
import React from 'react' import ReactEasyNotify notify from 'react-easy-notify'import 'react-easy-notify/dist/index.css' const options = type: 'success' title: 'success' status: true timeout: 5000 message: 'hi there, here is my awesome alert message' position: 'top-right' animationType: 'pops-up' const App = return <div> <button =>click me</button> <EasyNotify /> </div>
How to use the confirm
confirm provides a callback function, it can be used with cookies or similar things here is an example
import React from 'react' import ReactEasyNotify confirm from 'react-easy-notify'import 'react-easy-notify/dist/index.css' const options = text: 'your message or text here' { // will run after confirming } const App = return <div> <button =>click me</button> <EasyNotify /> </div>
Available Options
Option | Description | Example |
---|---|---|
status |
the status for running notification, if false the alert window will not appear | status: true |
type |
the alert type, there are three types success , warning , danger |
type: "success" |
title |
the alert title will appear in the header | title: "Hi there" |
message |
alert message will appear in the body, it can be of any language | message: "success message" |
timeout |
the alert window duration by millisecond | timeout: 500 |
position |
you can put the alert at many places in the browser window, the available options are top-left , top-right , top-center |
position: "top-right" |
animationType |
you can also choose an animation type you want from many available types | animationType: pops-up |
Position
property |
---|
top-left |
top-right |
top-center |
bottom-left |
bottom-right |
bottom-center |
AnimationType
property | description |
---|---|
fade-in |
fading alert window without animation |
pops-up |
pop up animation |
slide-left |
slide left alert window with fading |
slide-right |
slide right alert window with fading |
vibration |
vibrating in the alert window |
License
MIT © AlsiddigAhmed