Toast

import { toast, ToastContainer } from '@raystack/apsara';

function App() {
  return (
    <>
      <ToastContainer />
      {/* Your app content */}
    </>
  );
}

import { toast } from '@raystack/apsara';

function MyComponent() {
  return (
    <button onClick={() => toast('Hello World')}>
      Show Toast
    </button>
  );
}

// Success toast
toast.success('Operation completed successfully!');

// Error toast
toast.error('Something went wrong!');

// Warning toast
toast.warning('Please be careful!');

// Info toast
toast.info('Here is some information.');

// Loading toast
toast.loading('Processing...');

const myPromise = fetch('/api/data');

toast.promise(myPromise, {
  loading: 'Loading data...',
  success: 'Data loaded successfully!',
  error: 'Failed to load data',
});

toast('This will disappear in 5 seconds', {
  duration: 5000,
});

toast('Upload Complete', {
  description: 'Your file has been uploaded successfully.',
});

toast('File deleted', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo clicked'),
  },
});

// Dismiss a specific toast
const toastId = toast('This is a toast');
toast.dismiss(toastId);

// Dismiss all toasts
toast.dismiss();

toast('Custom styled toast', {
  style: {
    background: 'red',
    color: 'white',
  },
  className: 'my-custom-toast',
});

toast('Toast with callbacks', {
  onDismiss: () => console.log('Toast dismissed'),
  onAutoClose: () => console.log('Toast auto-closed'),
});

toast(
  <div>
    <strong>Custom Content</strong>
    <p>You can use JSX in toasts</p>
  </div>
);

const loadingToast = toast.loading('Processing...');

// Later, update to success
toast.success('Done!', { id: loadingToast });

const promise = new Promise((resolve) => {
  setTimeout(() => resolve('Success!'), 2000);
});

toast.promise(promise, {
  loading: 'Loading...',
  success: (data) => `${data}`,
  error: 'Error',
});

toast(message: string | ReactNode, options?: ToastOptions)

toast.success(message: string | ReactNode, options?: ToastOptions)

toast.error(message: string | ReactNode, options?: ToastOptions)

toast.warning(message: string | ReactNode, options?: ToastOptions)

toast.info(message: string | ReactNode, options?: ToastOptions)

toast.loading(message: string | ReactNode, options?: ToastOptions)

toast.promise(
  promise: Promise<T>,
  options: {
    loading: string | ReactNode;
    success: string | ReactNode | ((data: T) => string | ReactNode);
    error: string | ReactNode | ((error: Error) => string | ReactNode);
  }
)

toast.dismiss(id?: string | number)