Toast messages via CSS3 animations
npm install messg> 🎉 Lightweight toast message (notification) library with CSS3 animations




Note: This is a maintained fork of the original messg package, which is now maintained by Sumit Chowjar.
- Features
- Install
- Quick Start
- Usage Examples
- API Reference
- Options
- Browser Support
- TypeScript
- Contributing
- License
- 🎨 5 Message Types - default, success, info, warning, error
- ⚡ Lightweight - Only ~3.4kB minified
- 🎭 CSS3 Animations - Smooth fade in/out transitions
- 🔘 Custom Buttons - Add interactive buttons with callbacks
- 📍 Flexible Positioning - 6 different position options
- 🔄 Message Flow - Stack messages with configurable limits
- ⏱️ Auto-hide - Optional auto-dismiss with delay
- 📱 Responsive - Works on mobile and desktop
- 🔤 TypeScript Support - Full type definitions included
- 🎯 Zero Dependencies - Pure JavaScript
``sh`
npm install messg
Or with yarn:
`sh`
yarn add messg
`js
import messg from 'messg';
// Simple message
messg('Hello World!');
// Success message with button
messg
.success('Awesome!')
.button('Ok');
// Warning with callback
messg
.warning('Are you sure?')
.button('Yes', () => console.log('Confirmed'))
.button('No', () => console.log('Cancelled'));
`
`js
import messg from 'messg';
// Default message
messg('This is a message');
// Success message
messg.success('Operation completed!');
// Info message
messg.info('Here is some information');
// Warning message
messg.warning('Please be careful');
// Error message
messg.error('Something went wrong!');
`
`js
// Auto-hide after 2 seconds
messg.success('Saved successfully!', 2000);
// Global auto-hide for all messages
messg.Message.delay = 3000;
messg('This will auto-hide in 3 seconds');
`
`js`
messg
.warning('Confirm action')
.button('Confirm', () => {
messg.success('Action confirmed!');
})
.button('Cancel', () => {
messg.info('Action cancelled');
})
.hide(() => {
console.log('Message was dismissed');
});
`js
// Show multiple messages with flow
messg.success('Message 1');
setTimeout(() => messg.info('Message 2'), 300);
setTimeout(() => messg.warning('Message 3'), 600);
// Clear all messages
messg.Message.clean();
`
Create a Message instance.
#### Parameters
- text string - The message text to displaystring
- type (optional) - Message type: 'default', 'success', 'info', 'warning', 'error''default'
- Default: number
- delay (optional) - Auto-hide timeout in millisecondsnull
- Default: (no auto-hide)
#### Returns
Message - Message instance for method chaining
#### messg.success(text[, delay])
#### messg.info(text[, delay])
#### messg.warning(text[, delay])
#### messg.error(text[, delay])
Convenience methods for creating typed messages.
`js`
messg.success('Operation successful!');
messg.info('Information message', 2000);
messg.warning('Warning message');
messg.error('Error occurred!', 3000);
#### .button(name[, fn])
Add an interactive button to the message.
- name string - Button label textfunction
- fn (optional) - Callback function when button is clicked
- If no callback provided, button closes the message
Returns: Message - For method chaining
`js
// Button with callback
messg
.warning('Confirm deletion?')
.button('Delete', () => {
console.log('Item deleted');
})
.button('Cancel', () => {
console.log('Cancelled');
});
// Simple close button
messg
.success('Task completed')
.button('Ok');
`
Note: If no buttons are added, clicking the message will close it.
#### .hide([fn])
Set a callback for when the message is hidden, or hide the message immediately.
- fn function (optional) - Callback to execute when message is hidden
Returns: Message - For method chaining (when called with callback)
`js`
messg
.info('Processing...')
.hide(() => {
console.log('Message was dismissed');
});
#### .isHidden()
Check if the message is currently hidden.
Returns: boolean
`js`
const msg = messg('Hello');
console.log(msg.isHidden()); // false
msg.hide();
console.log(msg.isHidden()); // true
#### .show()
Show the message (if hidden).
Returns: Message - For method chaining
`js`
const msg = messg('Hello');
msg.hide();
msg.show(); // Show again
#### messg.Message.clean()
Close all messages in the flow.
`js`
messg.success('Message 1');
messg.info('Message 2');
messg.Message.clean(); // Close all
#### messg.Message.reposition()
Manually reposition all messages. Usually called automatically.
`js`
messg.Message.reposition();
Configure global message behavior using static properties on messg.Message:
Animation speed in milliseconds.
- Type: number250
- Default:
`js`
messg.Message.speed = 500; // Slower animations
messg('This message animates slowly');
Position where messages appear on screen.
- Type: string'top'
- Default: 'top'
- Options: , 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'
`js`
messg.Message.position = 'bottom-right';
messg.success('Message in bottom-right corner');
Enable/disable message stacking (flow).
- Type: booleantrue
- Default:
`js`
messg.Message.flow = false; // Messages won't stack
messg('Message 1');
messg('Message 2'); // Replaces Message 1
Maximum number of messages to display simultaneously.
- Type: number | nullnull
- Default: (unlimited)
`js`
messg.Message.max = 3; // Show max 3 messages
messg('Message 1');
messg('Message 2');
messg('Message 3');
messg('Message 4'); // Message 1 will be removed
Global auto-hide delay for all messages in milliseconds.
- Type: number | nullnull
- Default: (no auto-hide)
`js`
messg.Message.delay = 2000; // All messages auto-hide after 2 seconds
messg.success('This will auto-hide');
messg.info('This will also auto-hide');
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- IE 11+ (with polyfills)
Requires CSS3 support for animations.
Full TypeScript support with type definitions included.
`typescript
import messg, { Message, MessageType, MessagePosition } from 'messg';
// Type-safe message creation
const msg: Message = messg.success('Hello!');
// Type-safe options
const position: MessagePosition = 'top-right';
messg.Message.position = position;
// Type-safe message types
const type: MessageType = 'warning';
messg(type, 'Be careful!');
`
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature'
3. Commit your changes ()git push origin feature/amazing-feature`)
4. Push to the branch (
5. Open a Pull Request
See CHANGELOG.md for version history and changes.
MIT © Sumit Chowjar
Based on initial work by Andrey Polischuk
See LICENSE for details.