Simple-React-Notifications
Tiny library (only 1kb gzip) that allows you to add notifications to your app. We don't want to blow up our bundle size because of notifications, right?
Demo
https://alexpermyakov.github.io/simple-react-notifications/
Despite the small size, it supports:
- 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-notifications
$ yarn add simple-react-notifications
Usage
Rendering success and error default notifications
Notifier has a few built-in components for displaying an error or a successfull operation:
;;; const App = <div> <button onClick= { notifier; // notifier.error("Something went wrong, try again."); } > Lets render a default component </button> </div>;
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:
const RouteInfo = <div className="route-info" onClick=onClosePanel style= height: "200px" background: "#54cea7" color: "white" padding: "8px 16px" position: "relative" boxShadow: "rgba(0, 0, 0, 1) 0px 0px 14px 2px" > <h3 className="subtitle">header</h3> <p>Bicycle 24 km 8 min</p> <p>Use caution - may involve errors or sections not suited for bicycling</p> <button className="button" style= position: "absolute" bottom: "16px" right: "16px" > Use this route </button> </div>;
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:
const App = <div> <button onClick= > Notify with just a text message! </button> </div>;
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.
const App = <div> <button onClick= { // notifier({ // position: "top-left" // }); ; } > Show two of them in different places </button> </div>;
Configuring all in one place
Instead of specifing all params again and again for each item, we can put it in one place:
notifier; const App = <div> <button onClick= { notifier; } > Display an item with 500 ms delay Now it is done in </button> </div>;
Params in notifier function will override their default values in configure().
Animation
First, define the css-animation somewhere in your .css file:
@} @}
Second, specify it during the notifier() call or in configure():
notifier; const App = <div> <button onClick= { notifier; } > Show two of them in different places </button> </div>;
You can specify only in or out params as well.
Remove notification items programmatically
;; notifier; Component id = null; { return <div> <button onClick= thisid = >Notify</button> <button onClick= notifier>Dismiss</button> <button onClick= notifier>Dismiss all</button> </div> ; }