2.0.0 ⢠Published 3 months ago
notifier-mycin v2.0.0
Notifier-Mycin
A lightweight, highly customizable notification toast library built with Toastify-js.
š Features
- Simple & Intuitive API ā Easily create notifications with minimal code.
- Fully Customizable ā Modify themes, styles, positions, durations, and more.
- Flexible Positioning ā Display notifications in any corner of the screen.
- Auto-Dismiss & Manual Control ā Set durations or manually dismiss notifications.
- Real-time Updates ā Update existing notifications dynamically.
- React Hooks Support ā Seamless integration with React applications.
- TypeScript Ready ā Fully typed with robust definitions.
š¦ Installation
Install via npm or yarn:
npm install notifier-mycin
or
yarn add notifier-mycin
š Usage
Basic Example
import Notify from 'notifier-mycin';
// Show a success notification
Notify.success('Operation successful!');
// Show an error notification
Notify.error('Something went wrong.');
Customizing Notifications
Enhance your notifications by passing custom options:
import Notify from 'notifier-mycin';
const options = {
duration: 5000, // Duration in milliseconds
position: { x: 'left', y: 'top' }, // Position on screen
theme: 'dark', // Theme variant
style: 'solid', // Style type
className: 'my-custom-class', // Custom CSS class
icon: 'info-circle', // Icon
iconColor: 'blue', // Icon color
title: 'Notification Title', // Title
message: 'Detailed message text' // Message content
};
Notify.success('Success message', options);
React Hook Usage
If using React, leverage the useNotify
hook for cleaner integration:
import { useNotify } from 'notifier-mycin';
function MyComponent() {
const notify = useNotify();
const handleClick = () => {
notify.success('Success message');
};
return <button onClick={handleClick}>Show Notification</button>;
}
Updating & Dismissing Notifications
Modify or remove notifications dynamically:
import Notify from 'notifier-mycin';
const notification = Notify.success('Initial message');
// Update the notification
Notify.update(notification.id, { message: 'Updated message' });
// Dismiss the notification
Notify.dismiss(notification.id);
Dismissing All Notifications
Clear all active notifications with a single call:
import Notify from 'notifier-mycin';
Notify.success('Message 1');
Notify.success('Message 2');
Notify.dismissAll();
Setting Default Options
Configure global default settings for all notifications:
import Notify from 'notifier-mycin';
Notify.setDefaults({
duration: 5000,
position: { x: 'left', y: 'top' },
theme: 'dark',
style: 'solid',
className: 'my-custom-class',
icon: 'info-circle',
iconColor: 'blue',
title: 'Notification Title',
message: 'Notification Message'
});
š” Contributing
Contributions are welcome! If you encounter a bug or have a feature request, please open an issue or submit a pull request.
š License
This project is licensed under the MIT License. See the LICENSE file for more details.
š¬ Contact
For questions or support, feel free to reach out: š§ mycin.mit@gmail.com
Start using Notifier-Mycin today and enhance your notifications effortlessly! š