react-js-toast

react-js-toast

• Android like snackbar notification.
• Deferent 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.
• 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.
• Default Value 'easeOutExpo'

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.

textStyle : [Object] [optional]

• Toast text meassage custom style.

iconColor : [String] [optional]

• The default icon color.
• Default Value '#fff'

customIcon : [Function] [optional]

• Provide you own icon, a function that return a jsx element.

stackable : [Boolean] [optional]

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

rtl : [Boolean] [optional]

• For right to left languages.
• Default Value false

Methods

showToast()

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