Skip to content

sayjeyhi/iziToast-react

Repository files navigation

izitoast-react

Elegant, responsive, flexible and lightweight notification plugin with no dependencies.

A react wrapper for izitoast with react hooks

NPM JavaScript Style Guide

Fast Responsive Animated Lightweight Customizable No dependencies Retina
alt text alt text alt text alt text alt text alt text alt text
  • All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge).
  • Bugs? create an issue here.

Demo : CodeSandbox

Install

npm install --save izitoast-react

Usage

import React, { useEffect } from "react";

// Import these items
import { useToast, immediateToast } from "izitoast-react";
import "izitoast-react/dist/iziToast.css";

const App = () => {
  const showMessage = useToast({
    title: "Test",
    message: "Show my message :)",
    theme: "light",
    icon: "warn"
  });

  useEffect(() => {
    immediateToast("info", {
      message: "Hi, how it is going",
      timeout: 500000
    });
  });

  return (
    <div>
      <button onClick={showMessage}>Show</button>
    </div>
  );
};

Options:

{
  id: null, 
  class: '',
  title: '',
  titleColor: '',
  titleSize: '',
  titleLineHeight: '',
  message: '',
  messageColor: '',
  messageSize: '',
  messageLineHeight: '',
  backgroundColor: '',
  theme: 'light', // dark
  color: '', // blue, red, green, yellow
  icon: '',
  iconText: '',
  iconColor: '',
  iconUrl: null,
  image: '',
  imageWidth: 50,
  maxWidth: null,
  zindex: null,
  layout: 1,
  balloon: false,
  close: true,
  closeOnEscape: false,
  closeOnClick: false,
  displayMode: 0, // once, replace
  position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
  target: '',
  targetFirst: true,
  timeout: 5000,
  rtl: false,
  animateInside: true,
  drag: true,
  pauseOnHover: true,
  resetOnHover: false,
  progressBar: true,
  progressBarColor: '',
  progressBarEasing: 'linear',
  overlay: false,
  overlayClose: false,
  overlayColor: 'rgba(0, 0, 0, 0.6)',
  transitionIn: 'fadeInUp',
  transitionOut: 'fadeOut',
  transitionInMobile: 'fadeInUp',
  transitionOutMobile: 'fadeOutDown',
  buttons: {},
  inputs: {},
  onOpening: function () {},
  onOpened: function () {},
  onClosing: function () {},
  onClosed: function () {}
}
ARGUMENT DEFAULT VALUE DESCRIPTION
class '' The class that will be applied to the toast. It may be used as a reference.
title '' Title of the toast.
titleColor '' Title color.
titleSize '' Title fontSize.
titleLineHeight '' Title lineHeight.
message '' Message of notification.
messageColor '' Message color.
messageSize '' Message fontSize.
messageLineHeight '' Message lineHeight.
backgroundColor '' Background color of the Toast
theme '' It can be light or dark or set another class. Create and use like this ".iziToast-theme-name"
color '' It can be #hexadecimal, pre-defined themes like blue, red, green and yellow or set another class. Create and use like this ".iziToast-color-name"
icon '' Icon class (font-icon of your choice, Icomoon, Fontawesome etc.).
iconText '' Icon text (font-icon using text, Material Icons, etc.).
iconColor '' Icon color.
iconUrl null Address of file to be loaded.
image '' Cover image.
imageWidth 50 Width of cover image.
maxWidth null set maxWidth of toast.
zindex 99999 The z-index CSS attribute of the toast
layout 1
balloon false Applies a balloon like toast.
close true Show "x" close button
closeOnEscape false Allows to close toast using the Esc key.
closeOnClick false Allows to close toast clicking on it.
rtl false RTL option
position 'bottomRight' Where it will be shown. It can be bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter or center.
target '' Fixed place where you want to show the toasts.
targetFirst true Add toast to first position.
toastOnce DEPRECIATED false Waits for another toast to be closed on 'onClosed' function. You'll need an ID to use it.
displayMode 0 - Waits until the toast is closed so you can open it (Use 1 or 'once'). - Replaces the toast that was already open (Use 2 or 'replace').
timeout 5000 Amount in milliseconds to close the toast or false to disable.
drag true Drag Feature. Is used to close the toast.
pauseOnHover true Pause the toast timeout while the cursor is on it.
resetOnHover false Reset the toast timeout while the cursor is on it.
progressBar true Enable timeout progress bar.
progressBarColor '' Progress bar color.
progressBarEasing 'linear' Animation Easing of progress bar.
overlay false Enables display the Overlay layer on the page.
overlayClose false Allows to close toast clicking on the Overlay.
overlayColor 'rgba(0, 0, 0, 0.6)' Overlay background color.
animateInside true Enable animations of elements in the toast.
buttons {} You can specify an array of buttons.
inputs {} You can specify an array of inputs.
transitionIn 'fadeInUp' Default toast open animation. It can be: bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight or flipInX.
transitionOut 'fadeOut' Default toast close animation. It can be: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
transitionInMobile 'fadeInUp' Default toast opening mobile transition.
transitionOutMobile 'fadeOutDown' Default toast closing mobile transition.
onOpening function() {} Callback function triggered when opening the toast.
onOpened function() {} Callback function triggered when onOpened the toast.
onClosing function() {} Callback function triggered when closing the toast.
onClosed function() {} Callback function triggered when closed the toast.

Demo : CodeSandbox

License

React wrapper sayjeyhi Apache-2.0 © marcelodolza


This hook is created using create-react-hook.