Skip to content
Pure JavaScript library for better notification messages
Branch: master
Clone or download
Latest commit ee56ec7 Dec 6, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Added travis confid and prettier to the project May 31, 2018
src Update the version Dec 6, 2018
.gitattributes 🎊 Added .gitattributes & .gitignore files Sep 1, 2017
.gitignore
.prettierrc Added travis confid and prettier to the project May 31, 2018
.travis.yml
CHANGELOG.md
LICENSE Support for modules Feb 17, 2018
README.md Update the version Dec 6, 2018
index.html Added travis confid and prettier to the project May 31, 2018
package.json

README.md

Toastify

forthebadge forthebadge

toastify-js

Toastify is a lightweight, vanilla JS toast notification library.

Demo

Click here

Features

  • Multiple stacked notifications
  • Customizable
  • No blocking of execution thread

Customization options

  • Notification Text
  • Duration
  • Toast background color
  • Close icon display
  • Display position

Installation

Toastify now supports installation via NPM

  • Run the below command to add toastify-js to your exisitng or new project.
npm install --save toastify-js

or

yarn add toastify-js -S
  • Import toastify-js into your module to start using it.
import Toastify from 'toastify-js'

Adding ToastifyJs to HTML page using the traditional method

To start using Toastify, add the following CSS on to your page.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

And the script at the bottom of the page

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Files are delivered via the CDN service provided by jsdeliver

Documentation

Toastify({
  text: "This is a toast",
  duration: 3000,
  destination: "https://github.com/apvarun/toastify-js",
  newWindow: true,
  close: true,
  gravity: "top", // `top` or `bottom`
  positionLeft: true, // `true` or `false`
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();

Toast messages will be centered on devices with screen width less than 360px.

Add own custom classes

If you want to use custom classes on the toast for customizing (like info or warning for example), you can do that as follows:

Toastify({
  text: "This is a toast",
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
  className: "info",
}).showToast();

Multiple classes also can be assigned as a string, with spaces between class names.

Browsers support


IE / Edge

Firefox

Chrome

Safari

Opera
IE10, IE11, Edge last 10 versions last 10 versions last 10 versions last 10 versions

Contributors

rndevfx Wachiwi
rndevfx Wachiwi

License

MIT © Varun A P

You can’t perform that action at this time.