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

@ehynds/react-toast

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ehynds/react-toast

React toast notification component

  • 1.0.0
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-toast

build status

A deliberately minimal React toast component with an imperative API.

Installation

$ npm install --save @ehynds/react-toast

# or

$ yarn add @ehynds/react-toast

Usage

import { ToastProvider, useToast } from '@ehynds/react-toast';

// Somewhere up high in the tree
const App = () => (
  <ToastProvider>
    <SomeComponent />
  </ToastProvider>
);

const SomeComponent = () => {
  const toast = useToast();

  const onClick = () => {
    toast.success('It worked!');

    // OR:
    // toast.error('Error toast');
    // toast.info('Info toast');
  };

  return <a onClick={onClick}>Show a "success" toast</a>;
};

Options

Pass containerOptions to customize the element toasts are rendered into, and pass toastOptions to set defaults for all rendered toasts.

const containerOptions: Partial<ContainerOptions> = {
  className: 'toast-container'
};

const defaultToastOptions: Partial<ToastOptions> = {
  position: 'top-right
};

<ToastProvider
  containerOptions={containerOptions}
  toastOptions={defaultToastOptions}
/>

You can also pass ToastOptions into each toast individually:

const { success } = useToast();

success('It worked!', { autoHide: false });

Container Options

OptionDescriptionDefault
targetA reference to an Element where toasts will be rendered intodocument.body
classNameA class name to attach to the containerNone
styleAn object of CSS properties to attach to the containerNone

Toast Options

OptionDescriptionDefault
autoHideWhether or not each toast should automatically disappear after autoHideDuration secondstrue
autoHideDurationHow long (in seconds) until toasts disappear5000
positionWhere should toast appear? One of: top-left, top-center, top-righttop-center
onClickA handler to capture clicks on the toast. The handler receives an object as its only argument with a dismiss function to dismiss the toast.None
classNameA class name to attach to the toastNone
styleAn object of CSS properties to attach to the toastNone

Recipes

Dismiss a toast on click
const { success } = useToast():

success('Click me to dismiss', {
  onClick: ({ dismiss }) => dismiss()
});

Keywords

FAQs

Package last updated on 19 Feb 2021

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