react-high-toast/README.md

A highly customizable toast notification system for React using portals

# React Toast Portal

A customizable toast notification system for React using portals.

## Installation

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

## Usage

1. Wrap your application with the ToastProvider:

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

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

2. Use the toast in any component:

```jsx
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.

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)