Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-js-toast

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-js-toast

Android like toast (snackbar) notification.

  • 1.2.3
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

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 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' ] [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.
  • 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' ] [optional]

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

offset : [Number] [optional]

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

duration : [Number] [optional]

  • The time that takes 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.

Keywords

FAQs

Package last updated on 05 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc