README
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 = () => {
sweatNotify({
message:
"hello world's alert, here is my sweat one for you , it's awesome, isn't it?"
})
}
const App = () => {
return (
<div>
<ReactEasyNotify />
<button onClick={onClick}>sweat</button>
</div>
)
}
export default App
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 onClick={() => notify(options)}>click me</button>
<EasyNotify />
</div>
)
}
export default App
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',
callback: function () {
// will run after confirming
}
}
const App = () => {
return (
<div>
<button onClick={() => confirm(options)}>click me</button>
<EasyNotify />
</div>
)
}
export default App
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