Wondering what’s next for npm?Check out our public roadmap! »

@arturdoruch/flash-messenger

1.0.3 • Public • Published

Flash messenger

Displays flash messages on the screen.

Install

yarn add @arturdoruch/flash-messenger

Usage

import FlashMessenger from '@arturdoruch/flash-messenger';
 
const flashMessenger = new FlashMessenger({
    // Options. See options description below.
});
 
// Adds messages with custom types to the stack. 
flashMessenger.add('error', 'An error occurred.');
flashMessenger.add('notice', 'Notice message.');
flashMessenger.add('success', 'Success message.');
 
// Displays messages of all types.
flashMessenger.display();
 
// Displays messages of specific type.
flashMessenger.display('error');

Global options

Global options applied to the all FlashMessenger instances. Set by calling function setOptions().

import { setOptions as flashMessengerSetOptions } from '@arturdoruch/flash-messenger';
 
flashMessengerSetOptions({
    // Options 
});
  • elementsClassPrefix string (default: flash-message)

    The class name prefix of the message container and item elements.

  • all the common options

Instance options

Options specific for FlashMessenger instance.

import FlashMessenger from '@arturdoruch/flash-messenger';
 
const flashMessenger = new FlashMessenger({
    // Options
});
  • containerClassName string (default: null)

    Adds custom class name for message container div element.

  • all the common options

Common options

Global and per instance FlashMessenger options.

  • removeAfter int|null (default: 5)

    Time (in seconds) after message item will be removed form the container. If null message item will not be removed until will be clicked.

  • removeOnClick boolean (default: true)

    Specifies whether the message item should be removed after clicking.

  • positionVertical string (default: top)

    Vertical position of displayed message container. One of: top, center, bottom.

  • positionHorizontal string (default: center)

    Horizontal position of displayed message container. One of: left, center, right.

CSS styles

For styling flash messages use existing CSS styles import '@arturdoruch/flash-messenger/styles/flash-messenger.css'; or create your own.

Install

npm i @arturdoruch/flash-messenger

DownloadsWeekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

10.5 kB

Total Files

4

Last publish

Collaborators

  • avatar