react-notification-ui v0.0.4

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