Non-Potable Macchiato

    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

    Install

    npm i bs-toaster

    DownloadsWeekly Downloads

    35

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    147 kB

    Total Files

    18

    Last publish

    Collaborators

    • hummal