react-cutify v1.0.1

React Notification Library A lightweight and reusable notification library for React applications, built with TypeScript. Easily manage and display notifications across your application using React's Context API. Features

TypeScript Support: Fully typed interfaces and components for enhanced developer experience.
Context API: Global state management for notifications.
Customizable: Easily extendable notification types and styles.
Hover Functionality: Prevent notifications from auto-dismissing when hovered.
Accessible: ARIA attributes ensure notifications are screen reader-friendly.
Animations: Smooth fade-in and fade-out transitions for better user experience.

Installation Install the library using Bun or npm: Using Bun

bash bun add react-notification-library @dotlottie/react-player

Using npm

bash npm install react-notification-library @dotlottie/react-player

Usage 1. Wrap Your Application with NotificationProvider To provide the notification context to your application, wrap your root component with the NotificationProvider.

tsx // App.tsx or layout.tsx

import React from "react"; import { NotificationProvider } from "react-notification-library"; import { SomeComponent } from "./SomeComponent";

const App: React.FC = () => { return ( {/ Other components /} ); };

export default App;

2. Trigger Notifications Using useNotification Hook Use the useNotification hook to trigger notifications from any component within the NotificationProvider.

tsx // SomeComponent.tsx

import React from "react"; import { useNotification } from "react-notification-library";

const SomeComponent: React.FC = () => { const { showNotification } = useNotification();

const handleSuccess = () => { showNotification("Operation was successful!", "success"); };

const handleError = () => { showNotification("Something went wrong.", "failure"); };

const handlePersistent = () => { showNotification( "This is a persistent notification. Please acknowledge.", "goodbye", true ); };

return (

<div className="space-x-4">
  <button
    onClick={handleSuccess}
    className="px-4 py-2 bg-green-500 text-white rounded"
  >
    Show Success
  </button>
  <button
    onClick={handleError}
    className="px-4 py-2 bg-red-500 text-white rounded"
  >
    Show Error
  </button>
  <button
    onClick={handlePersistent}
    className="px-4 py-2 bg-yellow-500 text-white rounded"
  >
    Show Persistent
  </button>
</div>

); };

export { SomeComponent };

API NotificationProvider Provides the context for managing notifications. Wrap your application with this provider.

tsx import { NotificationProvider } from "react-notification-library";

const App = () => ( {/ Your application components /} );

useNotification Custom hook to access notification functions. Usage

tsx import { useNotification } from "react-notification-library";

const Component = () => { const { showNotification, removeNotification, notifications } = useNotification();

// Trigger a notification showNotification("Message", "type", true);

// Remove a notification removeNotification(id);

return ( // Your component JSX ); };

Methods

showNotification
    Parameters:
        message (string): The notification message.
        type (NotificationType): The type of notification (success, failure, etc.).
        persistent (boolean, optional): If true, the notification won't auto-dismiss.
    Usage:

    tsx
    showNotification("Data saved successfully!", "success");
    showNotification("Error saving data.", "failure", true);

removeNotification

Parameters:
    id (number): The ID of the notification to remove.
Usage:

tsx
removeNotification(notificationId);

notifications
    Type: NotificationItem[]
    Description: Array of current notifications.

Customization Extending Notification Types You can extend or modify the notification types by updating the NotificationType in the notificationTypes.ts file.

typescript export type NotificationType = | "success" | "failure" | "goodbye" | "removed" | "favourite" | "delete" | "uploaded" | "warning" | "customType"; // Add your custom types here

Styling The library uses CSS Modules for styling the Notification component. You can customize styles by editing the Notification.module.css file.

css / Notification.module.css /

.notification { / Existing styles / }

.fadeIn { / Fade-in animation / }

.fadeOut { / Fade-out animation / }

.success { border-left: 5px solid #4caf50; }

/ Add styles for your custom types / .customType { border-left: 5px solid #9c27b0; }

.iconContainer { / Icon styling / }

.message { / Message styling / }

.closeButton { / Close button styling / }

Adding Animations Integrate Lottie animations or other libraries to enhance the visual appeal of notifications. The current implementation uses @dotlottie/react-player for Lottie animations based on notification types. Contributing Contributions are welcome! Please follow these steps:

Fork the Repository
Create a Feature Branch

bash
git checkout -b feature/YourFeature

Commit Your Changes

bash git commit -m "Add your feature"

Push to the Branch

bash git push origin feature/YourFeature

Open a Pull Request

License This project is licensed under the MIT License. Acknowledgements

Built with React and TypeScript.
Animations powered by DotLottie.
Inspired by various open-source notification systems.