Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

toastifier

Package Overview
Dependencies
0
Maintainers
3
Versions
17
Issues
File Explorer

Advanced tools

toastifier

Light and Simple Multi-Framework Toaster

    1.2.2latest

Version published
Maintainers
3
Yearly downloads
3,302
increased by305.65%

Weekly downloads

Readme

Source

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.

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc