react-notification-alert-component v1.0.1

react-notification-alert-component

The Notification Alert Component for React, used for displaying notifications.

Features include:

• Adding custom msg & description to the notification.
• Configuring position of the notification(top-right | top-left | bottom-left | bottom-right).
• Deleting the notification manually & automatically.
• Adding duration for removing the notification automatically(if auto-delete is enabled).

Installation and usage

The easiest way to use react-notification-alert-component is to install it from npm.

npm i react-notification-alert-component

Then use it in your app:

import React from 'react';
import Toast from "react-notification-alert-component";

function App() {
    
    const testList = [
    {
      id: 1,
      title: 'Success',
      description: 'This is a success notification component',
      type: 'success'
    },
    {
      id: 2,
      title: 'Danger',
      description: 'This is an error notification component',
      type: 'danger'
    },
    {
      id: 3,
      title: 'Info',
      description: 'This is an info notification component',
      type: 'info'
    },
    {
      id: 4,
      title: 'Warning',
      description: 'This is an warning notification component',
      type: 'warning'
    },
    ];
    
  return (
    <div className="App">
        <Toast 
            toastList={testList}
            position="bottom-right"
            autoDelete={false}
            autoDeleteTime={3000}
        />
    </div>
  );
}

export default App;

Props

Props need to be inculded on the component:

• toastList - list of items(notification items).
• position - position of the notification(top-right | top-left | bottom-left | bottom-right).
• autoDelete - delete the notification auatomatically(true | false).
• autoDeleteTime - duration for removing the notification automatically(if auto-delete is enabled).