React Notifications

sagi_piti-notifications is a lightweight, easy-to-use notification component for React applications, such as Next.js projects. It allows developers to display notifications with optional images and logos, auto-dismissal capabilities, and callbacks for additional handling.

Features

• Easy to integrate with any React application.
• Support for custom logos and images within notifications.
• Auto-dismissal with customizable durations.
• Callback support when notifications are closed.

Installation

To install the sagi_piti-notifications package, use npm or yarn:

npm install sagi_piti-notifications

or

yarn add sagi_piti-notifications

Usage

Here's a quick example to get you started:

import React, { useState } from 'react';
import Notification from 'sagi_piti-notifications';
import NotificationContainer from 'sagi_piti-notifications';

function App() {
  const [showNotification, setShowNotification] = useState(false);

  return (
    <div>
      <button onClick={() => setShowNotification(true)}>Show Notification</button>
      {showNotification && (
        <NotificationContainer>
          <Notification
            logo="path/to/logo.png"
            title="Hello World"
            message="Your process is complete!"
            duration={5000}
            onClose={() => setShowNotification(false)}
          />
        </NotificationContainer>
      )}
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------------|----------|---------|----------------------------------------------------------| | logo | string | null | URL of the logo to display in the notification. | | message | string | none | The message to display in the notification. (Required) | | duration | number | 3000 | Duration in milliseconds before the notification closes. | | onClose | function | null | Callback function that is called when the notification closes. | | title | string | null | Tge Title to display in the notification (Required). |