Simple react notifications in 3steps

A lot of times, I feel that the documentation for npm packages are written pretty poorly and can be a pain for noobs to get started with. I really should start contributing to open source documentations.

Here’s a quick and easy way to get started with the react-notifications package without reading their documentation(that I couldn’t grasp on the first read).

1. Install the react-notifications package.

npm i react-notifications --save

2. Import notification manager and notification.css inside your App component. Render the NotificationContainer component inside your app. (only ever do this once in the entire app!). NB: I’m using React Hooks.

3. Head over to the component you want to use the notification in. Then import the notification manager. Create a showNotification function that you can call anywhere you need to show a notification.

And in our component…

Voila.

See final result below.

We’re done!