1.0.6 • Published 4 years ago

react-easy-notify v1.0.6

Weekly downloads
9
License
MIT
Repository
github
Last release
4 years ago

react-easy-notify

A React Library For Notifications

NPM JavaScript Style Guide

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

OptionDescriptionExample
statusthe status for running notification, if false the alert window will not appearstatus: true
typethe alert type, there are three types success, warning, dangertype: "success"
titlethe alert title will appear in the headertitle: "Hi there"
messagealert message will appear in the body, it can be of any languagemessage: "success message"
timeoutthe alert window duration by millisecondtimeout: 500
positionyou can put the alert at many places in the browser window, the available options are top-left, top-right, top-centerposition: "top-right"
animationTypeyou can also choose an animation type you want from many available typesanimationType: pops-up

Position

property
top-left
top-right
top-center
bottom-left
bottom-right
bottom-center

AnimationType

propertydescription
fade-infading alert window without animation
pops-uppop up animation
slide-leftslide left alert window with fading
slide-rightslide right alert window with fading
vibrationvibrating in the alert window

License

MIT © AlsiddigAhmed