Wondering what’s next for npm?Check out our public roadmap! »

react-push-notify

0.2.0 • Public • Published

React Push Notify

I want to be your :heart: notification in your React application

React Push Notify is React-based component for displaying push notifications in the browser. React Push Notify is meant to be well designed, compatible, lightwhite, customizable and easy to use.

DownloadDemoChatContribute

Intro


When I started looking for well designed, compatible, lightwhite, customizable and easy to use push notification for my React applications that fits my needs and delight users, I did not find a one that requires only one line of code. So, I decided to design and develop React Push Notify for displaying out-of-the-box push notifications.

Features


  • Creative design.

  • Lightwhite.

  • Customizable.

  • Easy to use.

  • Extensive.

Request Feature →

Installation


To get started with React Push Notify, you can simply install it via npm.

npm install react-push-notify

Discover on npm →

Basic Usage


To add React Push Notify in your application, you need to import it from its package and define the required properties.

import Notify from "react-push-notify";
 
const Notification = () => {
 
const data = {
  title: "Notify updates",
  subtitle: "Stay tuned with Notify",
  message: "I want to hear your feedback."
};
 
const action = {
  name: "Star",
  event: () => alert("Thank you for your star")
};
 
const props = { data, action };
 
return (<Notify {...props} />);
 

Show me →

Advanced Usage


You can customize your type and styles.

import Notify from "react-push-notify";
 
const Notification = () => {
 
const data = {
  title: "Notify updates",
  subtitle: "Stay tuned with Notify",
  message: "I want to hear your feedback."
};
 
const style = {
  rounded: true,
  animation: "bottom2up",
  duration: 1
}
 
const action = {
  name: "Star",
  event: () => alert("Thank you for your star")
};
 
const type = "success";
 
const props = { type, data, style, action };
 
return (<Notify {...props} />);
 

What about the Dark Mode?

Don't worry, the Dark Mode is included too. You need to add just darkmode property.

return (<Notify {...props} darkmode/>)

API reference


Props Type Required Dynamic Default Keys Alternatives
type string info success | error | warning
data object title: string

subtitle: string

message: string

style object rounded: false

animation: "left2right"

duration: 2

rounded: boolean

animation: string

duration: string

action object name: string

event: function

Next Release


React Push Notify started simple and minimal, but it needs your feedback to add more features and fix current bugs.

  • Add customizable media ( image, video) feature.

  • Add customizable position feature.

  • Add customizable background color feature.

Request feature →


Thank you


Install

npm i react-push-notify

DownloadsWeekly Downloads

2

Version

0.2.0

License

MIT

Unpacked Size

81.6 kB

Total Files

35

Last publish

Collaborators

  • avatar