@darksnow-ui/toaster NPM

Toaster

The toaster component renders and manages toast notifications. Built on top of Radix UI Toast primitive.

Installation

npm install @darksnow-ui/toaster

Peer Dependencies

npm install react react-dom

Usage

import { Toaster } from "@darksnow-ui/toaster"
import { useToast } from "@darksnow-ui/toast"
import { Button } from "@darksnow-ui/button"

function App() {
  return (
    <div>
      <ToastExample />
      <Toaster />
    </div>
  )
}

function ToastExample() {
  const { toast } = useToast()

  return (
    <Button
      onClick={() => {
        toast({
          title: "Success!",
          description: "Your action was completed successfully.",
        })
      }}
    >
      Show Toast
    </Button>
  )
}

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes

Examples

Basic Setup

import { Toaster } from "@darksnow-ui/toaster"

function App() {
  return (
    <div>
      {/* Your app content */}
      <main>
        <h1>My App</h1>
        {/* ... */}
      </main>
      
      {/* Place Toaster at the end of your app */}
      <Toaster />
    </div>
  )
}

Custom Positioning

<Toaster className="top-0 right-0" />

With Toast Provider

import { Toaster } from "@darksnow-ui/toaster"
import { ToastProvider } from "@darksnow-ui/toast"

function App() {
  return (
    <ToastProvider>
      <div>
        {/* Your app content */}
        <Toaster />
      </div>
    </ToastProvider>
  )
}

Features

Automatic positioning: Toasts are positioned appropriately
Queue management: Handles multiple toasts automatically
Animation: Smooth enter/exit animations
Responsive: Works on mobile and desktop
Accessible: Screen reader announcements
Theming: Uses DarkSnow UI design tokens

Toast Management

The Toaster component automatically:

Renders active toasts
Manages toast positioning and stacking
Handles auto-dismiss timers
Provides swipe-to-dismiss on mobile
Manages focus and accessibility

Setup Requirements

Add Toaster to your app: Place <Toaster /> at the root level
Use toast hook: Import and use useToast() to show toasts
Optional provider: Wrap with ToastProvider for additional configuration

// Root layout or App component
import { Toaster } from "@darksnow-ui/toaster"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Accessibility

Screen reader announcements for new toasts
Proper ARIA attributes
Keyboard navigation support
Focus management
Respects user motion preferences

Styling

The Toaster uses DarkSnow UI design tokens and automatically positions toasts in an accessible and visually appealing way.

Related Components

Toast - Individual toast notifications
Alert - Static alert messages

react toaster component ui darksnow typescript

clsx

1.0.0

7 months ago