@radix-ui/react-toast

Basic Toast

This code demonstrates how to create a basic toast notification using @radix-ui/react-toast. The ToastProvider component wraps the application, and the Toast component is used to display the notification with a title and description.

import { ToastProvider, Toast, ToastViewport } from '@radix-ui/react-toast';

function App() {
  return (
    <ToastProvider>
      <Toast>
        <Toast.Title>Notification</Toast.Title>
        <Toast.Description>This is a basic toast notification.</Toast.Description>
      </Toast>
      <ToastViewport />
    </ToastProvider>
  );
}

Auto Dismiss

This code demonstrates how to create a toast notification that automatically dismisses after a specified duration. The 'duration' prop is set to 5000 milliseconds (5 seconds) to achieve this behavior.

import { ToastProvider, Toast, ToastViewport } from '@radix-ui/react-toast';

function App() {
  return (
    <ToastProvider>
      <Toast duration={5000}>
        <Toast.Title>Auto Dismiss</Toast.Title>
        <Toast.Description>This toast will auto-dismiss after 5 seconds.</Toast.Description>
      </Toast>
      <ToastViewport />
    </ToastProvider>
  );
}

Custom Styling

This code demonstrates how to apply custom styles to a toast notification. The 'className' prop is used to add a custom CSS class to the Toast component, allowing for custom styling through an external CSS file.

import { ToastProvider, Toast, ToastViewport } from '@radix-ui/react-toast';
import './customStyles.css';

function App() {
  return (
    <ToastProvider>
      <Toast className='custom-toast'>
        <Toast.Title>Custom Styled Toast</Toast.Title>
        <Toast.Description>This toast has custom styles applied.</Toast.Description>
      </Toast>
      <ToastViewport />
    </ToastProvider>
  );
}