https://github.com/jjohnson1994/very-small-toast
A very small notification toaster
https://github.com/jjohnson1994/very-small-toast
alert alert-messages popup popup-message toast toast-message toast-notifications toaster
Last synced: about 1 month ago
JSON representation
A very small notification toaster
- Host: GitHub
- URL: https://github.com/jjohnson1994/very-small-toast
- Owner: jjohnson1994
- Created: 2018-04-28T15:29:37.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-17T11:23:55.000Z (about 7 years ago)
- Last Synced: 2025-10-02T14:12:35.682Z (8 months ago)
- Topics: alert, alert-messages, popup, popup-message, toast, toast-message, toast-notifications, toaster
- Language: JavaScript
- Homepage:
- Size: 115 KB
- Stars: 37
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A very small JS library for showing toasts, written in 496 bytes of CSS and 996 bytes of JS.
## How to
Install using Yarn or NPM
```
yarn add very-small-toast
- or -
npm install very-small-toast
```
#### Import JS
In you main JS file:
``` js
import Toast from 'very-small-toast';
...
$toast('Hello Toast');
```
The `$toast` method is added to `window` so can be called from anywhere.
#### Import CSS
You can either import the CSS or SCSS, if you want to customise anything import the SCSS.
To import CSS, in you index.html add
``` html
```
To import SCSS and make customising a lot easier, add this to your main .scss
``` css
@import 'very-small-toast-overrides';
@import '~very-small-toast/scss/verysmalltoast';
```
or in your main JS file
``` js
import 'very-small-toast/scss/verysmalltoast.scss'
```
`@import 'very-small-toast-overrides';` will be a file with variables overwriting the ones using in `verysmalltoast.scss`.
### Customising
Check inside `_variables.scss` to see what variables are available. All values used are available in `_variables.scss`, just set them in your custom `_toast-variable-overrides.scss`.