bs-toaster

1.0.5 • Public • Published

bs-toaster

A Bootstrap 5 Toast Framework - Easy to use. No other dependencies than Bootstrap itself.

CI Build Status GitHub release npm Github Releases

NPM

After using Bootstrap Toasts is nice but affords a lot of work to make them dynamic I created a ESM module framework for using orgininal Toasts without any additional dependecies as icons or stuff.

Simple create an instance of bs-toaster and create multiple toasts without any effort with native Bootstrap 5! 💪

Feature Facts

  • Small and clean
  • Modern browser support. No IE sorry
  • 💥 Support of custom icon markup 💥 🤘

Demo

Simple Demo

CodePen

Getting Started

Supported Browsers

  • Chrome 75+
  • Firefox 78+
  • Safari 14
  • Edge 90

Requirements

  • Bootstrap 5 NPM Package
  • Popperjs * (Is included in this package)

Installation

Because nodejs 14 is out of LTS we can make the use of esm modules. This package will only come as esm module.

npm i bs-toaster
yarn add bs-toaster

Remember to keep track of peerDependency Bootstrap if you are using yarn. Yarn does not install boostrap as a peerDependecies but only checks if it is there. You have to have it in your project already to being able to use Toaster.

Usage

Modul usage

To use bs-toaster as a module just import it and choose your options.

import {
    Toaster,
    ToasterPosition,
    ToasterTimer,
    ToasterType,
} from "bs-toaster";

Bundle usage

You can also use bs-toaster without compilation as a bundle. Simply copy the file Toaster.bundle.js from /dist/js folder.

Initilization
// Simple
const simpleToaster = new Toaster();

// Advanced
const advancedToaster = new Toaster({
    position: ToasterPosition.BOTTOM_END,
    type: ToasterType.DEFAULT,
    delay: 5000,
    timer: ToasterTimer.ELAPSED,
});
Basic Usage
simpleToaster.create("Important Title", "This is an important text");
Advandced Usage
advancedToaster.create("Important Title", "This is an important text", {
    type: ToasterType.DANGER,
    timer = ToasterTimer.COUNTDOWN,
    delay = 10000,
    animation = false,
});
Advanced - Custom Icon

If you want to have a special icon on your toast or have own styles for your types, you can simply override the icon markup. Just keep sure to insert the %TYPE% placeholder for the type to set. You can also overwrite all type contents for own added css classes.

ToasterType.DANGER = "myDangerClass";

const advancedToaster = new Toaster({
    defaultIconMarkup: `<i class="p-2 me-2 rounded %TYPE%"></i>`,
});

Options

Property Values Description
position ENUM Can be one of the ToasterPostion values.
Default: ToasterPosition.BOTTOM_END
type ENUM Can be one of the ToasterType values. This value describes the default type when no type is given in create.
Possible Values: DEFAULT, SUCCESS, DANGER, INFO, PRIMARY, WARNING, DARK
Default: ToasterType.DEFAULT
timer ENUM Can be on of the ToasterTimer values. Describes how the time will be displayed on the right side of the toast.
Default: ToasterTimer.ELAPSED
delay Number Describes after how many milliseconds the toast should disappear.
Default: 5000
defaultIconMarkup String If you want to change the look of the icon of the toast header you can do it here. Remember to insert the "%TYPE%" for better class control.
Default: <i class="p-2 me-2 rounded %TYPE%"></i>

FAQ 😕

Upcoming 🎺

  • [ ] Dark Mode

Known Bugs 💩

None yet

Troubleshooting

Nothing yet

Some things will happen. Please write an issue if you have an idea or need some help.

Inspiration

toaststrap BoostrapToaster

Package Sidebar

Install

npm i bs-toaster

Weekly Downloads

39

Version

1.0.5

License

MIT

Unpacked Size

147 kB

Total Files

18

Last publish

Collaborators

  • hummal