react-push-notify v0.2.0
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.
Download • Demo • Chat • Contribute
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.
Installation
To get started with React Push Notify, you can simply install it via npm.
npm install react-push-notify
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} />);
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
subtitle: string
message: string
animation: "left2right"
duration: 2
animation: string
duration: 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.