Retro Toast Demo

[ LIVE DEMO ]

Monitor SCREEN THEMES

QUICK ACTIONS

CUSTOM MESSAGE

TIMING CONTROL

Duration3000ms

1s3s5s7s10s

QUICK DURATION

SYSTEM CONTROL

Active notifications: 0

Hover over notifications to pause timer

ACTIVE SCREEN

> SYSTEM READY FOR BROADCAST...

ACTIVE THEME: DARK

• Dark background with light text (Classic CRT)

SAMPLE: Success Notification

SAMPLE: Error Alert

STATUS: ACTIVESCANLINES: ON

CURRENT THEME

Dark CRT Theme - Classic green scanlines

0 ACTIVE

Code Examples

components/App.tsx

import Toast from "./components/Toast";

function App() {
  const [showToast, setShowToast] = useState(false);

  return (
    <div>
      <button onClick={() => setShowToast(true)}>
        Show Toast
      </button>
      
      {showToast && (
        <Toast
          message="Operation successful!"
          type="success"
          duration={3000}
          onClose={() => setShowToast(false)}
        />
      )}
    </div>
  );
}

Basic Usage

This example shows the basic implementation of the toast component with state management.

[ INSTALLATION ]

// Install Retro Toast
npm install retro-toast

// (Optional) Icons used in examples
npm install @phosphor-icons/react

// Import component
import Toast from "retro-toast";

// Usage examples
function App() {
  return (
    <>
      {/* Dark Theme - Classic CRT */}
      <Toast
        message="System online!"
        type="success"
        theme="dark"
        duration={3000}
        onClose={() => console.log("Closed")}
      />

      {/* Light Theme - Modern Monitor */}
      <Toast
        message="Warning: Low memory"
        type="warning"
        theme="light"
        duration={5000}
        onClose={() => console.log("Closed")}
      />

      {/* Custom Theme - Your Color */}
      <Toast
        message="Custom notification"
        type="info"
        theme="custom"
        customColor="#FF00FF"
        duration={4000}
        onClose={() => console.log("Closed")}
      />
    </>
  );
}

FEATURES

3 Monitor themes (Dark, Light, Custom)
Authentic CRT scanlines & noise
4 notification types with icons
Progress bar with pause on hover
VHS-style glitch animations

THEMES

dark
Classic CRT with green scanlines
light
Modern monitor with dark text
custom
User-defined background color
auto-contrast
Text color adjusts automatically

PROPS

theme="dark | light | custom"
customColor="#RRGGBB"
duration={number}
type="success | error | warning | info"