Skip to content

React Notification Component

React notification component simple and quick react notification npm package can be used in any pages to display a notification. Follow the below steps to achieve it.

Install the npm dependency

npm install react-notifications-component // To get all component and CSS files

Import component and CSS in the page where notification is needed

import ReactNotification from 'react-notifications-component'; //For component
import 'react-notifications-component/dist/theme.css'; //For CSS
import { store } from 'react-notifications-component'; //For accessing component properties

Define component in the code

render(){
  return (
    <div className="app-container">
    	<ReactNotification />
    </div>
  )
}

Use the component in the code (yes, we are allowed to customize the properties)

store.addNotification({
  title: "Alert!",
  message: "le contact a ete ajoute avec succes",
  type: "success",
  insert: "top",
  container: "top-right",
  animationIn: ["animated", "fadeIn"],
  animationOut: ["animated", "fadeOut"],
  dismiss: {
    duration: 5000,
    onScreen: true
  }
});

Refer the screenshot to understand how notifications would look like from this react component.

This is similar to a toast message which can disappear automatically if not user can also close the notification.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.