toa

toastifier

🏷️It's a simple, lightweight, and easy-to-use npm package for displaying alerts, popups with some customizable features like animation, positions, style, etc.⭐

Showing:

Popularity

Downloads/wk

67

GitHub Stars

6

Maintenance

Last Commit

7d ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Angular Toast

Readme

Installation

$ npm install --save toastifier
$ yarn add toastifier

Simple Example

import React from "react";

import toastifier from "toastifier";
import "toastifier/dist/toastifier.min.css";

function App() {
  return (
    <div>
      <button onClick={() => toastifier("Alert Check")}>Notify!</button>
    </div>
  );
}

Demo

You can play with our official Demo here


Image


Documentation

Check this to get you started!

NameTypeDescription
typeStringToast Type
animationStringAnimation Category
durationNumberDuration for Animation .
positionStringToast position on window.
onhoverPauseBooleanpasue toast on hover.
showIconBooleanShow default SVG icons on toast
onClickFunctionFunction to trriger events.
styleClassClass ObjectObject for Style Class.
backgroundStringBackground colour, by default white
textStringText Color, by default based on toast type
borderStringBorder, by default based on toast type

Available options

NameValuesDefault
typeerror, success, warn, infosuccess
animationflip, bounce, fade, zoombounce
positiontop-left, top-center, top-right, bottom-left, bottom-center, bottom-right,top-center
onhoverPausetrue/falsefalse
showIcontrue/falsetrue

Complete Example

import React from "react";

import toastifier from "toastifier";
import "toastifier/dist/toastifier.min.css";

function App() {
  const toastfunction = () => {
    alert("function Trigerred");
  };
  const options = {
    type: "success",
    shadow: false,
    animation: "bounce",
    duration: 3000,
    position: "top-center",
    onhoverPause: true,
    onClick: toastfunction,
    styleClass: {
      background: "#22272e", // dark mode
      text: "#fff",
      border: "#eee",
    },
  };
  const notify = () => toastifier("Boom! it Worked", options);

  return (
    <div>
      <button onClick={notify}>Notify!</button>
    </div>
  );
}

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome!

Code Contributors

This project exists thanks to all the people who contribute.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100