Oh-snack NPM | npm.io

About

oh-snack displays stackable snackbar notifications.

It currently features:

notifications stack on top of each other, with fancy push animations
configurable position on screen, allowing multiple at once
custom animation classes, to create that fancy 3d spinning animation you always dreamed of
hide notifications after timeout
optional dismiss button

Install

NPM:

npm install oh-snack

or:

CDN:

<script src="https://unpkg.com/oh-snack/dist/index.umd.js"></script>

Usage

Add bundled CSS:

Using a bundler:

import 'oh-snack/dist/index.css';

or:

CDN:

<link rel="stylesheet" href="https://unpkg.com/oh-snack/dist/index.css" />

Import module when using NPM:

import { snack } from 'oh-snack';

Example:

snack("Hi, I'm a snackbar notification 👋");

snack("Hi, I'm a sticky notification up here.", {
  position: 'topRight',
  timeout: false,
});

✨ View Demo

API

/**
 * Show a snackbar notification
 * @param message Message to display
 * @param config Configuration
 */
function snack(message: string, config?: SnackConfiguration): void;

SnackConfiguration:

{
  /**
   * Position on screen
   * @default 'bottomCenter'
   */
  position?:
    | 'topLeft'
    | 'topCenter'
    | 'topRight'
    | 'bottomLeft'
    | 'bottomCenter'
    | 'bottomRight';
  /**
   * Timeout in milliseconds after which notification is hidden.
   * Set to false to enable sticky notification.
   * @default 2800
   */
  timeout?: number | false;
  /**
   * Defines Whether a close button is shown
   * @default !timeout
   */
  closeable?: boolean;
  /**
   * Show animation class
   * @default 'os-show-default'
   */
  showAnimationClass?: string;
  /**
   * Hide animation class
   * @default 'os-hide-default'
   */
  hideAnimationClass?: string;
}

Run tests

npm run test

Contact

👤 Timo Bechtel

🤝 Contributing

Contributions, issues and feature requests are welcome!

Check issues
Fork the Project
Create your Feature Branch (git checkout -b feat/AmazingFeature)
Test your changes npm run test
Commit your Changes (git commit -m 'feat: add amazingFeature')
Push to the Branch (git push origin feat/AmazingFeature)
Open a Pull Request

Commit messages

This project uses semantic-release for automated release versions. So commits in this project follow the Conventional Commits guidelines. I recommend using commitizen for automated commit messages.