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.

📚 Table of Contents

- Features
- Install
- Quick Start
- Usage Examples
- API Reference
- Options
- Browser Support
- TypeScript
- Contributing
- License

✨ Features

- 🎨 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

📦 Install

``sh
npm install messg
`

Or with yarn:

`sh
yarn add messg
`

🚀 Quick Start

`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'));
`

📖 Usage Examples

$3

`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!');
`

$3

`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');
`

$3

`js
messg
.warning('Confirm action')
.button('Confirm', () => {
messg.success('Action confirmed!');
})
.button('Cancel', () => {
messg.info('Action cancelled');
})
.hide(() => {
console.log('Message was dismissed');
});
`

$3

`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();
`

🔧 API Reference

$3

Create a Message instance.

#### Parameters

- text string - The message text to display
- type string (optional) - Message type: 'default', 'success', 'info', 'warning', 'error'
- Default: 'default'
- delay number (optional) - Auto-hide timeout in milliseconds
- Default: null (no auto-hide)

#### Returns

Message - Message instance for method chaining

$3

#### 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);
`

$3

#### .button(name[, fn])

Add an interactive button to the message.

- name string - Button label text
- fn function (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
`

$3

#### 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();
`

⚙️ Options

Configure global message behavior using static properties on messg.Message:

$3

Animation speed in milliseconds.

- Type: number
- Default: 250

`js
messg.Message.speed = 500; // Slower animations
messg('This message animates slowly');
`

$3

Position where messages appear on screen.

- Type: string
- Default: 'top'
- Options: 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'

`js
messg.Message.position = 'bottom-right';
messg.success('Message in bottom-right corner');
`

$3

Enable/disable message stacking (flow).

- Type: boolean
- Default: true

`js
messg.Message.flow = false; // Messages won't stack
messg('Message 1');
messg('Message 2'); // Replaces Message 1
`

$3

Maximum number of messages to display simultaneously.

- Type: number | null
- Default: null (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
`

$3

Global auto-hide delay for all messages in milliseconds.

- Type: number | null
- Default: null (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');
`

🌐 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- IE 11+ (with polyfills)

Requires CSS3 support for animations.

🔷 TypeScript

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!');
`

🤝 Contributing

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)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

📝 Changelog

See CHANGELOG.md for version history and changes.

📄 License

MIT © Sumit Chowjar

Based on initial work by Andrey Polischuk

See LICENSE for details.