JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1529338
  • Score
    100M100P100Q196914F
  • License MIT

Package Exports

  • react-hot-toast

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-hot-toast) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-hot-toast

Not yet published - improved docs coming soon

Install

yarn add react-hot-toast

or with npm

npm install react-hot-toast

Basic usage

import toast, { ToastsContainer } from 'react-hot-toast';

const App = () => {
  return (
    <div>
      <ToastContainer />
    </div>
  );
};

// Show notifications anywhere
toast('Hello World');

<ToastContainer /> API

<ToastContainer
  position="top-center" // Support top-left, top-center, top-right, bottom-left, bottom-center & bottom-right
  zIndex={false} // Defaults to 9999
  reverseOrder={true} // Toasts spawn at top by default
  // Custom styling
  toastStyle={{
    margin: '40px',
    background: '#363636',
    color: '#fff',
  }}
  toastClassName=""
  containerStyle={{}}
  containerClassName=""
/>

toast() API

Create a toast

toast('Hello World'); // Blank (No icon)
toast.success('Successfully created!'); // Checkmark
toast.error('This is an error!'); // Error
toast.loading('Waiting...'); // Loading spinner

// Alternatively you use toast options
toast('Success', { type: 'success' });

Available toast() options

toast('Hello World', {
  duration: 4000,
  type: 'success',
  icon: '👏',

  // Aria
  role: 'status',
  ariaLive: 'polite',
});

Remove a toast programmatically

Toasts will auto-remove bei default.

const toastId = toast.loading('Loading...');

// ...

toast.dismiss(toastId);

Update an existing toast

const toastId = toast.loading('Loading...');

// ...

toast.success('This worked', {
  id: toastId,
});

Use with promises

This shorthand is useful for mapping a promise to a toast. It will update when the promise resolves or fails.

Simple Usage

// Basic usage
toast.promise(myPromise, {
  loading: 'Loading',
  success: 'Got the data',
  error: 'Error when fetching',
});

Advanced

// Basic usage
toast.promise(
  myPromise,
  // Messages for each outcome. Support callback to include Promise result
  {
    loading: 'Loading',
    success: (data) => `Successfully saved ${data.name}`,
    error: (err) => `This just happened: ${err.string}`,
  },
  // Options for each outcome
  {
    success: {
      duration: 5000,
      icon: '🔥',
    },
  }
);

Render custom content

You can provide a React components instead of text.

// Basic usage
toast(
  <span>
    Custom and <b>bold</b>
  </span>,
  {
    icon: <Icon />,
  }
);