react-js-toast

react-js-toast

• Customizable Android like snackbar notification.
• Different icon and background color for every toast type.
• Stack new toasts on top of each other.

Installation

npm install react-js-toast

Usage

//...
import Toast from 'react-js-toast';

export default function App() {
  let alertMe = null;

  const toast_handle = () => {
    // passing (message, type) params will replace Toast props.
    alertMe.showToast('this is a toast notification', 'success');
  };

  return (
    <>
      <Toast ref={node => (alertMe = node)} type='info' message='my default message' />
      // ...
      <button onClick={toast_handle}>Show Toast Notification</button>
    </>
  );
}

Props

message : [String]

• Toast text message.
• Default Value Toast message goes here

type : [ 'info' | 'warning' | 'error' | 'success' ] [optional]

• Every type has different icon and background color.
• Default Value info

animation : [ 'fade' | 'slide' | 'none' ] [optional]

• Toast animaion style.
• Default Value fade

animationDutation : [Number] [optional]

• Toast animaion duration in ms.
• Default Value 300

ease : [String] [optional]

• Toast animaion timing function.
• Easing functions specify the rate of change of the number over time.
• Default Value easeOutExpo
• Avaliable Easing functions : "linear", "easeInSine", "easeOutSine", "easeInOutSine", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInBack", "easeOutBack", "easeInOutBack", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBounce", "easeOutBounce", "easeInOutBounce"
• If you want to provide your own timing-function make sure that the function takes one parameter and returns one value.

function easeInQuad(x) {
  return x * x;
}

position : [ 'top' | 'bottom' ] [optional]

• Show toast from the bottom or from the top of the body page.
• Default Value bottom

duration : [Number] [optional]

• The time that take to hide toast in ms.
• Default Value 3000

toastStyle : [Object] [optional]

• Toast container custom style.
• If given will overwrite toast type prop default style.

textStyle : [Object] [optional]

• Toast text meassage custom style.

iconColor : [String] [optional]

• Icon default color.
• Default Value #fff

customIcon : [Function] [optional]

• Provide you own icon, a function that return a jsx element.
• Use upper case for the function name.

const Custom_icon = () => {
  return (
    <svg style={icon_style} viewBox='0 0 24 24'>
      <path d='M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z' />
    </svg>
  );
};

stackable : [Boolean] [optional]

• Allow toasts to stack on top of each other, if false new toast will replace the old one.
• Default Value true

stackLimit : [Number] [optional]

• Toasts stack limit number, no new toast will be added to the stack after reaching the limit.
• Default Value 5

rtl : [Boolean] [optional]

• For right to left languages.
• Default Value false

zIndex : [Number] [optional]

• Toast wrapper element z-index css value.
• Default Value 1000

Methods

showToast()

• ShowToast(message?: String, type?: 'info' | 'warning' | 'error' | 'success')
• Note: Passing params will replace given porps values.