Table of Contents

• Installation
• Usage
• Test
• Contact
• Contributing
• License

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

• Website: https://timobechtel.com
• Twitter: @TimoBechtel
• GitHub: @TimoBechtel

🤝 Contributing

Contributions, issues and feature requests are welcome!

1. Check issues
2. Fork the Project
3. Create your Feature Branch (git checkout -b feat/AmazingFeature)
4. Test your changes npm run test
5. Commit your Changes (git commit -m 'feat: add amazingFeature')
6. Push to the Branch (git push origin feat/AmazingFeature)
7. 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.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Distributed under the MIT License.

This README was generated with ❤️ by readme-md-generator