Simple-React-Notifications2

Tiny library (only 1.3kb gzip - typescript support) that allows you to add notifications to your app. We don't want to blow up our bundle size because of notifications, right?

Forked from https://github.com/alexpermiakov/simple-react-notifications because maintainer didn't had time for fixes/enhancements.

You can check size from https://arve0.github.io/npm-download-size/ or https://bundlephobia.com/

Demo

https://rizwan-ishtiaq.github.io/simple-react-notifications2/

Despite the small size, it supports:

• Simple-React-Notifications2
  • Demo
  • Installation
  • Usage
    • Rendering success and error default notifications
    • Rendering user defined component
    • Positioning
    • Configuring all in one place
    • Animation
    • Remove notification items programmatically

Installation

$ npm install simple-react-notifications2
$ yarn add simple-react-notifications2

Usage

Rendering success and error default notifications

Notifier has a few built-in components for displaying an error or a successfull operation:

1import React from "react";
2import notifier from "simple-react-notifications2";
3import "simple-react-notifications2/dist/index.css";
4
5const App = () => (
6  <div>
7    <button
8      onClick={() => {
9        notifier.success("Your items have been updated");
10        // notifier.error("Something went wrong, try again.");
11      }}
12    >
13      Lets render a default component
14    </button>
15  </div>
16);

Rendering user defined component

The real power comes with rendering our own component. In this case it's not even a notification, just a view with real data:

1const RouteInfo = ({ header, onClosePanel }) => (
2  <div
3    className="route-info"
4    onClick={onClosePanel}
5    style={{
6      height: "200px",
7      background: "#54cea7",
8      color: "white",
9      padding: "8px 16px",
10      position: "relative",
11      boxShadow: "rgba(0, 0, 0, 1) 0px 0px 14px 2px"
12    }}
13  >
14    <h3 className="subtitle">{header}</h3>
15    <p>Bicycle 2.4 km, 8 min.</p>
16    <p>Use caution - may involve errors or sections not suited for bicycling</p>
17    <button
18      className="button"
19      style={{ position: "absolute", bottom: "16px", right: "16px" }}
20    >
21      Use this route
22    </button>
23  </div>
24);

It completely up to us the way we add styles. We can use styled-components or whatever we like. The notify() method will just render it:

1const App = () => (
2  <div>
3    <button
4      onClick={() =>
5        notifier({
6          render: ({ id, onClose }) => (
7            <RouteInfo
8              key={id}
9              onClosePanel={onClose}
10              header={"The shortest way to ride home."}
11            />
12          )
13        })
14      }
15    >
16      Notify with just a text message!
17    </button>
18  </div>
19);

As you can see here, render() receives onClose callback, which we have to pass inside our component in order to close the notification when user click on the button.

Positioning

By default, all items will be positioned in the top right corner. The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.

1const App = () => (
2  <div>
3    <button
4      onClick={() => {
5        // notifier({
6        //   position: "top-left"
7        // });
8
9        notifier({
10          single: true, // display only the latest item
11          position: "top-center",
12          render: ({ id, onClose }) => (
13            <RouteInfo
14              key={id}
15              onClosePanel={onClose}
16              header={"The shortest way to ride home."}
17            />
18          )
19        });
20      }}
21    >
22      Show two of them in different places
23    </button>
24  </div>
25);

Configuring all in one place

Instead of specifing all params again and again for each item, we can put it in one place:

1notifier.configure({
2  autoClose: 2000,
3  position: "top-center",
4  delay: 500,
5  single: false,
6  width: "480px"
7});
8
9const App = () => (
10  <div>
11    <button
12      onClick={() => {
13        notifier.success("Your items have been updated");
14      }}
15    >
16      Display an item with 500 ms delay. Now it is done in configure()
17    </button>
18  </div>
19);

Params in notifier function will override their default values in configure().

Animation

First, define the css-animation somewhere in your .css file:

1@keyframes fadeIn {
2  from {
3    opacity: 0;
4  }
5  to {
6    opacity: 1;
7  }
8}
9
10@keyframes fadeOut {
11  from {
12    opacity: 1;
13  }
14  to {
15    opacity: 0;
16  }
17}

Second, specify it during the notifier() call or in configure():

1notifier.configure({
2  position: "top-center",
3  animation: {
4    in: "fadeIn", // try to comment it out
5    out: "fadeOut",
6    duration: 600 // overriding the default(300ms) value
7  }
8});
9
10const App = () => (
11  <div>
12    <button
13      onClick={() => {
14        notifier.success("Your items have been updated");
15      }}
16    >
17      Show two of them in different places
18    </button>
19  </div>
20);

You can specify only in or out params as well.

Remove notification items programmatically

1import React from "react";
2import notifier from "simple-react-notifications2";
3
4notifier.configure({
5  render: ({ id, onClose }) => (
6    <RouteInfo
7      key={id}
8      onClosePanel={onClose}
9      header={"The shortest way to ride home."}
10    />
11  )
12});
13
14class App extends React.Component {
15  id = null;
16
17  render() {
18    return (
19      <div>
20        <button onClick={() => (this.id = notifier())}>Notify</button>
21        <button onClick={() => notifier.dismiss(this.id)}>Dismiss</button>
22        <button onClick={() => notifier.dismiss()}>Dismiss all</button>
23      </div>
24    );
25  }
26}