display-toast
v1.0.0
Published
A customizable toast message package for displaying notifications globally
Downloads
4
Maintainers
goel1443Readme
Custom Toast Messages
A lightweight, customizable toast notification package for displaying beautiful toast messages in web applications and as a global CLI tool.
Features
- 🎨 Beautiful Design: Modern, clean toast notifications with smooth animations
- 🎯 Multiple Types: Success, Error, Warning, and Info toast types
- 📍 Flexible Positioning: Top-right, top-left, bottom-right, bottom-left, or center
- ⏱️ Customizable Duration: Set custom display duration for each toast
- 🔧 Highly Customizable: Progress bars, close buttons, custom classes, and more
- 🌐 Global CLI Tool: Use as a command-line tool to display toast messages
- 📦 Zero Dependencies: Lightweight with no external dependencies
- 🎭 Smooth Animations: Entrance and exit animations with CSS transitions
Installation
As a Library
npm install custom-toast-messagesAs a Global CLI Tool
npm install -g custom-toast-messagesUsage
JavaScript Library
Basic Usage
import { toast } from 'custom-toast-messages';
// Simple toast
toast.show('Hello World!');
// Success toast
toast.success('Operation completed successfully!');
// Error toast
toast.error('Something went wrong!');
// Warning toast
toast.warning('Please check your input');
// Info toast
toast.info('New message received');Advanced Usage
// Custom options
toast.show('Custom message', {
type: 'success',
duration: 10000,
position: 'center',
showCloseButton: true,
showProgressBar: true,
customClass: 'my-custom-toast',
onClick: () => console.log('Toast clicked!'),
onClose: () => console.log('Toast closed!')
});
// Clear all toasts
toast.clear();Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| type | string | 'info' | Toast type: 'success', 'error', 'warning', 'info' |
| duration | number | 5000 | Duration in milliseconds (0 for persistent) |
| position | string | 'top-right' | Position: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center' |
| showCloseButton | boolean | true | Show/hide close button |
| showProgressBar | boolean | true | Show/hide progress bar |
| customClass | string | '' | Additional CSS class for styling |
| onClick | function | null | Click handler for the toast |
| onClose | function | null | Callback when toast is closed |
Global CLI Tool
Basic Usage
# Simple toast
toast "Hello World!"
# Success toast
toast -t success "Operation completed successfully!"
# Error toast with custom duration
toast -t error -d 10000 "Something went wrong!"
# Warning toast in center position
toast -t warning -p center "Please check your input"
# Info toast without progress bar
toast --type info --no-progress "New message received"Interactive Mode
# Start interactive mode
toast -i
# or
toast --interactiveCLI Options
| Option | Short | Description |
|--------|-------|-------------|
| --type | -t | Toast type: success, error, warning, info |
| --duration | -d | Duration in milliseconds |
| --position | -p | Position: top-right, top-left, bottom-right, bottom-left, center |
| --no-close | | Hide close button |
| --no-progress | | Hide progress bar |
| --help | -h | Show help message |
| --version | -v | Show version |
| --interactive | -i | Start interactive mode |
Examples
React Component Example
import React from 'react';
import { toast } from 'custom-toast-messages';
function MyComponent() {
const handleSuccess = () => {
toast.success('Data saved successfully!');
};
const handleError = () => {
toast.error('Failed to save data', {
duration: 8000,
onClick: () => console.log('Error toast clicked')
});
};
return (
<div>
<button onClick={handleSuccess}>Show Success</button>
<button onClick={handleError}>Show Error</button>
</div>
);
}Vanilla JavaScript Example
<!DOCTYPE html>
<html>
<head>
<title>Toast Example</title>
</head>
<body>
<button onclick="showToast()">Show Toast</button>
<script type="module">
import { toast } from './node_modules/custom-toast-messages/dist/index.js';
window.showToast = function() {
toast.success('This is a success message!', {
duration: 3000,
position: 'center'
});
};
</script>
</body>
</html>Styling
The package includes built-in styles, but you can customize them using CSS:
/* Custom toast styling */
.toast {
/* Your custom styles */
}
.toast-success {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
}
.toast-error {
background: linear-gradient(135deg, #dc3545, #e74c3c);
color: white;
}Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
Development
Building the Package
# Install dependencies
npm install
# Build for production
npm run build
# Development build with watch
npm run dev
# Run tests
npm testPublishing to npm
# Login to npm
npm login
# Publish package
npm publish
# Publish with specific tag
npm publish --tag betaLicense
MIT License - see LICENSE file for details.
Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
Changelog
v1.0.0
- Initial release
- Basic toast functionality
- Multiple toast types
- Global CLI tool
- Interactive mode
- Customizable options