00mjk / toastmaker

ToastMaker is a light javascript library for showing toast notifications on web page.

Small JavaScript Library for Showing Toast Notifications
Demo & Documentation

ToastMaker

Toast Maker is a simple and very lightweight javascript library for showing toast notification messages on web page. It provides multiple configurations to customize the toast styling(font, background, size ... anything), duration, position etc.

Demo

ToastMaker Demo

Features

• Small Footprint
• Responsive
• Customizable Styling
• Can be Used With Vanilla Javascript, NPM Project or ReactJS Project
• Works With - IE10, IE11, Edge, Chrome, Firefox, Safari, Opera
• No Dependencies
• 100% Code Coverage

Include toastmaker library in your project

Install toastmaker module in npm project

You can install toastmaker module in your npm project using npm or yarn.

npm install --save toastmaker

or

yarn add toastmaker -S

After adding the toastmaker module to your project, import it in your script as shown below.

import ToastMaker from 'toastmaker';
import "toastmaker/dist/toastmaker.css";

NOTE: The toastmaker.css is the default css file. If you want you can refer to it and create your own css file and import it instead of this default one.

Include toastmaker library in a plain html

ToastMaker can also be used with plain vanilla javascript project. Just add the minified javascript and css file in you main html and you can start using it inside the javascript.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">

<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>

If you want you can download the bundle from the releases section, then include & reference the files locally rather than using the cdn links.

How to use?

Using ToastMaker is very simple. Create a toast by passing the text message, as shown in below example

  ToastMaker('Hi There!');

If you want to change the default timeout, position, styling etc you can pass the optional arguments. Refer below example.

  ToastMaker('Hi There!', 2000,  {
    styles: { fontSize: '18px', backgroundColor: 'green' },
    classList: ['custom-class', 'other-custom-class'],
    align: 'right',
    valign: 'top'
  });

Use your own styles and css classes

You can specify multiple styles or your own css classes using styles and classList options respectively. This is useful in case you want to change the background, font-size, color, padding, border, ... and a lot of other styling as per your requirement.

  ToastMaker("Hi There!", 2000,  {
    styles: { fontSize: "15px" },
    classList: ["custom-class"]
  });

For more examples, check out the live demo page - ToastMaker Demo

Options

Option	Type / Allowed Values	Description	Default	Mandatory?
text	string	Text message to be shown in toast	N/A	Yes
timeout	number	Duration (In milliseconds) for which the toast should be displayed	3000	No
styles	object	Object containing style properties to be applied to toast	N/A	No
classList	array	Array of css classes to be applied to toast	N/A	No
align	'left' 'center' 'right'	Horizontal alignment for toast	'center'	No
valign	'top' 'bottom'	Vertical alignment for toast	'bottom'	No

Note: All options except text and timeout needs to be wrapped inside an object and passed to the ToastMaker as the 3rd argument.

Refer How to use? section to know how these options should be used with the ToastMaker function.

Bundle size

	size	gzip
toastmaker
toastify-js
toastr
noty

Versioning

For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE.md file for details