Simplest Toaster Plugin – very-small-toast

Preview:

Description:

A really simple toast notification that automatically fades out after a certain timeout.

How to use it:

1. Install the package.

# Yarn
$ yarn add very-small-toast
# NPM
$ npm install very-small-toast --save

2. Import the very-small-toast.

import 'scss/verysmalltoast.scss';
import Toast from 'very-small-toast';

3. Show a toast message on the page.

$toast('Toast Message Here');

4. Override the default styles and timeout in the _vstoastvariables.scss

$toast-box-margin: 20px !default;
$toast-box-top: 0 !default;
$toast-box-right: 0 !default;
$toast-box-left: unset !default;
$toast-box-bottom: unset !default;
$toast-box-transform: unset !default;
$toast-text-color: #f5f5f5 !default;
$toast-background-color: #2b2b2b !default;
$toast-border-radius: 3px !default;
$toast-padding: 10px 14px !default;
$toast-shadow: 1px 3px 5px #adadad !default;
$toast-length: 2s !default;
$toast-animation: toastFadeIn;
$toast-font-size: 1rem;