A Bootstrap 5 Toast Framework - Easy to use. No other dependencies than Bootstrap itself.
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! 💪
- Small and clean
- Modern browser support. No IE sorry
- 💥 Support of custom icon markup 💥 🤘
- Chrome 75+
- Firefox 78+
- Safari 14
- Edge 90
- Bootstrap 5 NPM Package
- Popperjs * (Is included in this package)
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.
To use bs-toaster as a module just import it and choose your options.
import {
Toaster,
ToasterPosition,
ToasterTimer,
ToasterType,
} from "bs-toaster";
You can also use bs-toaster without compilation as a bundle. Simply copy the file Toaster.bundle.js from /dist/js folder.
// Simple
const simpleToaster = new Toaster();
// Advanced
const advancedToaster = new Toaster({
position: ToasterPosition.BOTTOM_END,
type: ToasterType.DEFAULT,
delay: 5000,
timer: ToasterTimer.ELAPSED,
});
simpleToaster.create("Important Title", "This is an important text");
advancedToaster.create("Important Title", "This is an important text", {
type: ToasterType.DANGER,
timer = ToasterTimer.COUNTDOWN,
delay = 10000,
animation = false,
});
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>`,
});
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> |
- ⭐ Dark Mode
None yet
Some things will happen. Please write an issue if you have an idea or need some help.