The react-notification-ui library helps you in displaying notification in beautiful and easy way.

Table of contents

1. Installation
2. Demo
3. Basic Usage

Installation

• Using NPM npm i react-notification-ui

• Using Yarn yarn add react-notification-ui

Demo

https://stackblitz.com/edit/react-notification-ui

Code example

https://github.com/Roxiler/react-notification-ui/blob/main/src/App.tsx

Checkout below gif.

Basic Usage of Notify

• Demo 1 : For Predefined card data need data in this format :

  import { Notify } from 'react-notification-ui';
  
  const data = [
    {
      image: 'https://reqres.in/img/faces/1-image.jpg',
      title: 'Aryan Ty',
      description:
        'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, cumque!',
      time: '2 days',
    },
    {
      image: 'https://reqres.in/img/faces/2-image.jpg',
      title: 'Aryan Tirkey',
      description:
        'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, cumque!',
      time: '1 days',
    },
    {
      image: 'https://reqres.in/img/faces/3-image.jpg',
      title: 'Roxiler System',
      description:
        'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, cumque!',
      time: '1 days',
    },
    {
      image: 'https://reqres.in/img/faces/4-image.jpg',
      title: 'Jhon Doe',
      description:
        'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, cumque!',
      time: '10 sec',
    },
  ];
  
  export default function App() {
    return (
      <div>
        <Notify data={data} />
      </div>
    );
  }
  

• For theme, number of card shown and hiding count indicator :

  <Notify data={data} theme="dark" maxCardShown={3} hideCount />
  
  

• For passing CustomIcon, CustomButton, CustomCard and custom data :

  <Notify data={data} customButton={<CustomButton/>} customCard={<CustomCard/>} customIcon={<CustomIcon/>} />
  
  const CustomCard = (e) => {
      return <div onClick={e.onClick}>{e.data.title}</div>
  }
  
  const CustomIcon = () => {
      return <div><img src /></div>
  }
  
  const CustomButton = (e) => {
      return <button>{e.label}</button>
  }
  
  

• changing position and transition , while position change cardPosition and transformOrigin are required :

  <Notify data={data} cardPosition="top"  transformOrigin={x:"top", y:"top"}/>
  
  

  props

Accepted props	type	Description
cardPosition	string	sets card position like "left","right","top","bottom"
transformOrigin	object	with combination of cardPosition this is used to set origin position x and y
hideCount	boolean	set card count visible or hidden, by default its false
notificationCountVariant	string	set notification count variant
customIcon	ReactNode	pass custom icon component
customCard	ReactNode	pass custom card component
cardProps	object	sets card style , variant and onClick to card
customButton	ReactNode	pass custom button component for show more
buttonProps	object	sets show more button style and label
dropBoxStyle	css properties	pass css to control the position , and style of component
dropBoxShadow	string	choose from various shadow style
data	[object]	pass props from example 1.1 when using predefined card
maxCardShown	number	set number of card to be shown
showShowMoreBtn	boolean	set if you want show more button to be visible or hidden
dropAnimation	string	choose from various drop animation
dropAnimation	string	choose from various drop animation
theme	string	choose from dark or light theme