bapple: A JavaScript repository from Evand

Installation

Install using NPM

npm install --save bapple

Basic Usage

Just import and call one of these: message, success, error, warning, info

import Bapple from 'bapple';

Bapple.message('Info toast', 'This is a toast to inform you of...', 5000);

// You can ignore description and timeout params.
Bapple.message('Successfully done!');

// And so on...
Bapple.success(...);
Bapple.error(...);
Bapple.warning(...);
Bapple.info(...);

There are some options that applies to all the toasts, and some options that affects only a single toast.

Global Options

Customize default options with Bapple.config, This will affect every toast.

direction: This determines the text direction, Left-to-Right or Right-to-Left. Available: ltr, rtl Default: ltr
position: By default, toasts appear in the left-bottom of your pages. But you are free to choose the right-bottom position. Available: left, right Default: left
size: Customize the size of your toast. Available: small, normal, large Default: normal
timeout: How long the toast will be visible, in milliseconds. This would be override for each toast, as mentioned above. Default: 5000

Example config for RTL support:

Bapple.config({
  direction: 'rtl',
  position: 'right',
  size: 'small',
  timeout: 10000
});

Options for each Toast

If you want more control over a single toast, you can use Bapple.add instead of Bapple.error or Bapple.success or...

type: This determines the style of your toast. Available: success, info, error, warning, message Default: message
title: Toast title
description: Toast description
timeout: How long the toast will be visible, in milliseconds. This will override the timeout from global options.

Example

Bapple.add({
  type: 'error',
  title: 'Your title here...',
  description: 'Description here...',
  timeout: 6000
});