Toast

1. Install the package

npm install d12-ui

2. Import the hook

import { useToast } from "d12-ui"

3. Add ToastProvider to your app

import { ToastProvider } from "d12-ui"

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

4. Basic Usage

Common Patterns

Success/Error Notifications

// Success toast
toast({
  variant: "success",
  title: "Success!",
  description: "Your changes have been saved.",
})

// Error toast
toast({
  variant: "destructive",
  title: "Error",
  description: "Something went wrong. Please try again.",
})

Form Submission Feedback

const handleSubmit = async (data) => {
  try {
    await submitForm(data)
    toast({
      title: "Form submitted",
      description: "We'll get back to you soon!",
    })
  } catch (error) {
    toast({
      variant: "destructive",
      title: "Submission failed",
      description: "Please check your input and try again.",
    })
  }
}

Custom Duration

// Toast that stays for 10 seconds
toast({
  title: "Important notice",
  description: "This message will stay longer",
  duration: 10000, // 10 seconds
})

// Toast that doesn't auto-dismiss
toast({
  title: "Persistent message",
  description: "This won't disappear automatically",
  duration: Infinity,
})

Integration Tips