Tiny react.js notification library (1kb gzip).
npm install simple-react-notificationsTiny 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?
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
``
$ npm install simple-react-notifications
$ yarn add simple-react-notifications
Notifier has a few built-in components for displaying an error or a successfull operation:
`javascript
import React from "react";
import notifier from "simple-react-notifications";
import "simple-react-notifications/dist/index.css";
const App = () => (
$3
The real power comes with rendering our own component. In this case it's not even a notification, just a view with real data:
javascript
const RouteInfo = ({ header, onClosePanel }) => (
onClick={onClosePanel}
style={{
height: "200px",
background: "#54cea7",
color: "white",
padding: "8px 16px",
position: "relative",
boxShadow: "rgba(0, 0, 0, 1) 0px 0px 14px 2px"
}}
>
{header}
Bicycle 2.4 km, 8 min.
Use caution - may involve errors or sections not suited for bicycling
style={{ position: "absolute", bottom: "16px", right: "16px" }}
>
Use this route
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:
javascript
const App = () => (
notifier({
render: ({ id, onClose }) => (
onClosePanel={onClose}
header={"The shortest way to ride home."}
/>
)
})
}
>
Notify with just a text message!
);
`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.
$3
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.
javascript
const App = () => (
// notifier({
// position: "top-left"
// }); notifier({
single: true, // display only the latest item
position: "top-center",
render: ({ id, onClose }) => (
onClosePanel={onClose}
header={"The shortest way to ride home."}
/>
)
});
}}
>
Show two of them in different places
);
`$3
Instead of specifing all params again and again for each item, we can put it in one place:
javascript
notifier.configure({
autoClose: 2000,
position: "top-center",
delay: 500,
single: false,
width: "480px"
});const App = () => (
notifier.success("Your items have been updated");
}}
>
Display an item with 500 ms delay. Now it is done in configure()
);
`Params in notifier function will override their default values in configure().
$3
First, define the css-animation somewhere in your .css file:
css
@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():
javascript
notifier.configure({
position: "top-center",
animation: {
in: "fadeIn", // try to comment it out
out: "fadeOut",
duration: 600 // overriding the default(300ms) value
}
});const App = () => (
notifier.success("Your items have been updated");
}}
>
Show two of them in different places
);
`You can specify only in or out params as well.
$3
javascript
import React from "react";
import notifier from "simple-react-notifications";notifier.configure({
render: ({ id, onClose }) => (
onClosePanel={onClose}
header={"The shortest way to ride home."}
/>
)
});
class App extends React.Component {
id = null;
render() {
return (
);
}
}
``