Notify

Notification component made easy for your react project

---

Notify is React-based component for displaying push notifications in the browser.

Notify is meant to be well designed, compatible, lightwhite, customizable and easy to use.

Download • Demo • Contribute

Quick 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 the users, I did not find a one that requires only one line of code. So, I decided to design and develop Notify for displaying out-of-the-box push notifications.

Features

• Creative design.

• Lightwhite.

• Customizable.

• Easy to use.

• Extensive.

Installation

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

npm install @ala_eddine/react-push-notify

Basic Usage

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

import Notify from "@ala_eddine/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 "@ala_eddine/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/>)

Media Usage

Now, you can include a Media (image, video) to your Notification.

<Notify {...props} darkmode>
	<Media src={MEDIA_PATH} link={LINK} />
</Notify>

API reference

Props	Type	Required	Dynamic	Default	Keys	Alternatives
type	string	-	yes	info	-	success | error | warning
data	object	yes	yes	-	title: string subtitle: string message: string	-
style	object	-	yes	rounded: false animation: "left2right" duration: 2	rounded: boolean animation: string duration: string	-
action	object	yes	yes	-	name: string event: function	-
autohide	boolean		yes	false	-	true

Changelog

---

Changelog.

Licence

---

MIT.