Have ideas to improve npm?Join in the discussion! »

    @salahhamza/snackbars

    3.1.0 • Public • Published

    Snackbar

    Costume snackbar that works like Snackbars in Android. Controls the multiple snackbars at the same time.

    Installation

    First, make sure to include the snackbar.css file otherwise the snackbars will not have any styles.

    Then install the module from npm:

    npm install @salahhamza/snackbars --save

    Usage

    import Snackbars from '@salahhamza/snackbars';
     
    const snackbars = new Snackbars(document.body);
     
    snackbars.show({
      name: 'update',
      message: 'New version available. Refresh to update',
      actions: [{
        name: 'refresh',
        handler() {
          window.location.reload();
        },
        textColor: '#00FF00'
      }, {
        name: 'dismiss'
      }]
    });

    API

    Snackbars(container[, makeCustomeOfflineSnackbar])

    Constructor, takes 2 parameters:

    • container: the DOM element to which the snackbars are appended to. defaults to document.body.
    • makeCustomeOfflineSnackbar: makes offline that show up when there is no interne access (hides when internet access is back) and online snackbar that show up when internet is back up. defaults to false.

    show(options)

    Makes/adds a new snackbar with the specified options to the queue.

    options.name

    Type: String Default: undefined Required: yes

    Snackbar name to handle snackbar correctly.

    options.message

    Type: String Default: undefined Required: yes

    Message to show in snackbar.

    options.actions

    Type: Array.<Object> Default: undefined Required: No

    Snackbar's action buttons.

    Note: If you don't provide actions or a duration a dismiss action will be made for you to hide the snackbar.

    action.name

    Type: String Default: undefined Required: Yes

    Placeholder text on the action button.

    action.handler

    Type: Function Default: undefined Required: Yes

    a callback function to execute when the action button is clicked.

    action.dismissOnAction

    Type: Boolean Default: true Required: No

    If false snackbar doesn't disappear when the action is executed.

    options.duration

    Type: Number Default: undefined Required: No

    Duration to hide snackbar in milliseconds.

    Note: If you don't provide actions or a duration a dismiss action will be made for you to hide the snackbar.

    options.gap

    Type: Boolean Default: 500(ms) Required: No

    Gap between showing every snackbar and the other in milliseconds.

    Limitations

    • The snackbar element has a z-index of 999999, that means any element on your page with a z-index heigher than that might hide the snackbar.

    License

    Snackbars is a public domain work, dedicated using CC0 1.0. Feel free to do whatever you want with it.

    Install

    npm i @salahhamza/snackbars

    DownloadsWeekly Downloads

    1

    Version

    3.1.0

    License

    CC0 1.0

    Unpacked Size

    18.6 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar