AsciiToast

Temporary notification messages with ASCII styling and automatic dismissal.

Preview

Installation

npm install react-ascii-ui

Usage

import { AsciiToast } from 'react-ascii-ui';

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

  return (
    <div>
      <button onClick={() => setShowToast(true)}>
        Show Toast
      </button>

      <AsciiToast
        type="success"
        message="Operation completed successfully"
        duration={3000}
        isVisible={showToast}
        onClose={() => setShowToast(false)}
        position="bottom-right"
      />
    </div>
  );
}

Examples

Toast Types

(i)
This is an informational message
(✓)
Operation completed successfully
(âš )
Please review your settings
(!)
Failed to save changes

Auto-dismiss Toast

Simple Message Toast

(✓)
File saved successfully

API Reference

PropTypeDefaultDescription
messagestring-Toast message text
type'info' | 'success' | 'warning' | 'error''info'Toast type for styling
durationnumber4000Auto-dismiss duration (0 = no auto-dismiss)
isVisibleboolean-Controls toast visibility
onClose() => voidundefinedCalled when toast is closed
position'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center''bottom-right'Toast position on screen
showCloseButtonbooleantrueShow/hide close button

Toast Features

  • Four toast types with distinct ASCII styling
  • Automatic dismissal with configurable duration
  • Manual dismiss with close button
  • Optional message content below title
  • Monospace font with bracket notation
  • Type-specific color coding