React-js-toast NPM

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.

npm.io

Installation

npm install react-js-toast

Usage

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

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

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

  return (
    <>
      <Toast ref={node => (toastMethod = 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'

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

animation : 'fade' | 'slide' | 'none'

Toast animaion style.
Default Value fade

animationDutation : Number

Toast animaion duration in ms.
Default Value 300

ease : String

Toast animaion timing function.
Check easings.net to learn more.
Default Value easeOutExpo
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'

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

offset : Number

Toast offset from the bottom or from the top in pixels depending on the position prop value.
Default Value 30

duration : Number

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

toastStyle : Object

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

textStyle : Object

Toast text meassage custom style.

iconColor : String

Icon default color.
Default Value #fff

customIcon : Function

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>
  );
};