Skip to content

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

License

Notifications You must be signed in to change notification settings

varun-singhh/Toastifier

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!

Name Type Description
type String Toast Type
animation String Animation Category
duration Number Duration for Animation .
position String Toast position on window.
onhoverPause Boolean pasue toast on hover.
showIcon Boolean Show default SVG icons on toast
onClick Function Function to trriger events.
styleClass Class Object Object for Style Class.
background String Background colour, by default white
text String Text Color, by default based on toast type
border String Border, by default based on toast type
onAppear Function Callback executes when toast appears
onDisappear Function Callback executes when toast disappears

Available options

Name Values Default
type error, success, warn, info success
animation flip, bounce, fade, zoom bounce
position top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, top-center
onhoverPause true/false false
showIcon true/false true

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",
    },
    onAppear: () => console.log('toast appeared'),
    onDisappear: () => console.log('toast disappeared')
  };
  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.

About

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

Topics

Resources

License

Stars

Watchers

Forks