Toast Component Documentation

Our custom react-toast like toast alert component

Setup

1. Wrap your application with the ToastProvider at a high level in your component tree:

import { ToastProvider } from './path/to/ToastContext';
function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

Usage

Basic Usage

1. Import the useToast hook in your component:

import { useToast } from '@blend-ed/blendx-ui';

2. Use the hook to show toasts:

function YourComponent() {
  const showToast = useToast();
  const handleClick = () => {
    showToast('check', 'success', 'Operation successful!');
  };
  return (
    <button onClick={handleClick}>Show Toast</button>
  );
}

Parameters:

• icon: React node representing the icon to display
• type: String indicating the toast type (e.g., 'success', 'error', 'warning')
• text: String message to display in the toast

Examples:

// Success Toast
showToast('check', 'success', 'Item created successfully');
// Error Toast
showToast('close', 'error', 'Operation failed');
// Warning Toast
showToast('warning', 'warning', 'Please fill all required fields');