React Toast Portal

A customizable toast notification system for React using portals.

Installation

npm install react-high-toast
# or
yarn add react-high-toast

Usage

1. Wrap your application with the ToastProvider:

import { ToastProvider, ToastContainer } from 'react-high-toast';
import 'react-high-toast/dist/styles/toast.css'; // Import styles

function App() {
  return (
    <ToastProvider>
      <YourApp />
      <ToastContainer />
    </ToastProvider>
  );
}

2. Use the toast in any component:

import { useToast } from 'react-high-toast';

function MyComponent() {
  const toast = useToast();

  const showToast = () => {
    toast.success('Operation completed!', {
      duration: 3000,
      position: 'top-right'
    });
  };

  return <button onClick={showToast}>Show Toast</button>;
}

API

ToastProvider

The context provider that manages toast state.

ToastContainer

Renders the toasts using React Portal. Place this once in your app.

useToast()

Hook that returns toast functions:

• toast(message, options)
• toast.success(message, options)
• toast.error(message, options)
• toast.warning(message, options)
• toast.info(message, options)
• toast.dismiss(id)

Options

Property	Type	Default	Description
id	string	auto-generated	Custom toast ID
type	'success'|'error'|'warning'|'info'|'default'	'default'	Toast type
duration	number	5000 (ms)	How long toast stays visible (0 = persistent)
position	ToastPosition	'top-right'	Where toast appears
render	function	undefined	Custom render function

Customization

Import the CSS file and override the styles as needed.