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:
import React from "react";
import notifier from "simple-react-notifications";
import "simple-react-notifications/dist/index.css";
const App = () => (
<div>
<button
onClick={() => {
notifier.success("Your items have been updated");
// 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 = ({ header, onClosePanel }) => (
<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 2.4 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={() =>
notifier({
render: ({ id, onClose }) => (
<RouteInfo
key={id}
onClosePanel={onClose}
header={"The shortest way to ride home."}
/>
)
})
}
>
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"
// });
notifier({
single: true, // display only the latest item
position: "top-center",
render: ({ id, onClose }) => (
<RouteInfo
key={id}
onClosePanel={onClose}
header={"The shortest way to ride home."}
/>
)
});
}}
>
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.configure({
autoClose: 2000,
position: "top-center",
delay: 500,
single: false,
width: "480px"
});
const App = () => (
<div>
<button
onClick={() => {
notifier.success("Your items have been updated");
}}
>
Display an item with 500 ms delay. Now it is done in configure()
</button>
</div>
);Params in notifier function will override their default values in configure().
Animation
First, define the css-animation somewhere in your .css file:
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}Second, specify it during the notifier() call or in configure():
notifier.configure({
position: "top-center",
animation: {
in: "fadeIn", // try to comment it out
out: "fadeOut",
duration: 600 // overriding the default(300ms) value
}
});
const App = () => (
<div>
<button
onClick={() => {
notifier.success("Your items have been updated");
}}
>
Show two of them in different places
</button>
</div>
);You can specify only in or out params as well.
Remove notification items programmatically
import React from "react";
import notifier from "simple-react-notifications";
notifier.configure({
render: ({ id, onClose }) => (
<RouteInfo
key={id}
onClosePanel={onClose}
header={"The shortest way to ride home."}
/>
)
});
class App extends React.Component {
id = null;
render() {
return (
<div>
<button onClick={() => (this.id = notifier())}>Notify</button>
<button onClick={() => notifier.dismiss(this.id)}>Dismiss</button>
<button onClick={() => notifier.dismiss()}>Dismiss all</button>
</div>
);
}
}
