https://github.com/timobechtel/oh-snack
Delicious snackbar notifications
https://github.com/timobechtel/oh-snack
javascript notification snackbar toast
Last synced: 5 months ago
JSON representation
Delicious snackbar notifications
- Host: GitHub
- URL: https://github.com/timobechtel/oh-snack
- Owner: TimoBechtel
- License: mit
- Created: 2020-04-09T23:37:19.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-03-04T11:18:52.000Z (over 3 years ago)
- Last Synced: 2025-10-22T04:58:24.051Z (8 months ago)
- Topics: javascript, notification, snackbar, toast
- Language: TypeScript
- Homepage: https://timobechtel.github.io/oh-snack/
- Size: 2.11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
🥪
Oh-Snack
Simple snackbar notifications
·
Homepage
·
View Demo
·
Report Bug / Request Feature
·
## Table of Contents
- [Installation](#Install)
- [Usage](#usage)
- [Test](#run-tests)
- [Contact](#contact)
- [Contributing](#Contributing)
- [License](#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:
```sh
npm install oh-snack
```
or:
### CDN:
```html
```
## Usage
### Add bundled CSS:
#### Using a bundler:
```javascript
import 'oh-snack/dist/index.css';
```
or:
#### CDN:
```html
```
### Import module when using NPM:
```javascript
import { snack } from 'oh-snack';
```
### Example:
```javascript
snack("Hi, I'm a snackbar notification 👋");
snack("Hi, I'm a sticky notification up here.", {
position: 'topRight',
timeout: false,
});
```
### ✨ View Demo
### API
```typescript
/**
* Show a snackbar notification
* @param message Message to display
* @param config Configuration
*/
function snack(message: string, config?: SnackConfiguration): void;
```
SnackConfiguration:
```typescript
{
/**
* 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
```sh
npm run test
```
## Contact
👤 **Timo Bechtel**
- Website: https://timobechtel.com
- Twitter: [@TimoBechtel](https://twitter.com/TimoBechtel)
- GitHub: [@TimoBechtel](https://github.com/TimoBechtel)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
1. Check [issues](https://github.com/TimoBechtel/oh-snack/issues)
1. Fork the Project
1. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)
1. Test your changes `npm run test`
1. Commit your Changes (`git commit -m 'feat: add amazingFeature'`)
1. Push to the Branch (`git push origin feat/AmazingFeature`)
1. Open a Pull Request
### Commit messages
This project uses semantic-release for automated release versions. So commits in this project follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.2/) guidelines. I recommend using [commitizen](https://github.com/commitizen/cz-cli) for automated commit messages.
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Distributed under the [MIT](https://github.com/TimoBechtel/oh-snack/blob/main/LICENSE) License.
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_