toast.pheralb.dev Open in urlscan Pro
172.67.222.33  Public Scan

Form analysis
0 forms found in the DOM

Text Content

pheralb/toast
TwitterGitHubToggle theme

Introduction

Getting StartedUsage with Next.js

Components

ToastProvideruseToast

Customization

Dark Mode
v0.0.1
Found a bug?Built by pheralb


TOAST

An accessible and beautiful toast library for React.

Render a toastView on GitHub


FRAMEWORK GUIDES

Install on Next.jsInstall on RemixInstall on Astro


GETTING STARTED

 1. Install the library:

# Using npm:
npm install @pheralb/toast
 
# Using pnpm:
pnpm add @pheralb/toast
 
# Using yarn:
yarn add @pheralb/toast

 2. Add the toast provider:

// 📃 main.tsx
import { ToastProvider } from '@pheralb/toast';
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ToastProvider position="bottom-right">
      <App />
    </ToastProvider>
  </React.StrictMode>,
);

 3. Usage:

// 📃 index.tsx
export default function Index() {
  const toast = useToast();
  return (
    <>
      <button
        onClick={() =>
          toast.success({
            text: 'pheralb/toast',
            description: '✨ A beautiful toast library for React',
          })
        }
      >
        <span>Render a toast</span>
      </button>
    </>
  );
}