Is it possible to create a toast based on a url query param?

[gmcamposano]

I am using nextjs, so my code looks like this:

'use client'
import { useToast } from './components/ui/use-toast'
import { useSearchParams } from 'next/navigation'
import { useEffect } from 'react'
export default function Demo() {
  const { toast } = useToast()
  const searchParams = useSearchParams()
  const error = searchParams.get('error')

  useEffect(() => {
    if (error === 'AccessDenied') {
      toast({
        title: 'Error',
        description: error,
      })
    }
  }, [error, toast])

  return (
    <div>
      <h1>Next.js + TypeScript</h1>
      <p>error: {error}</p>
    </div>
  )
}

[miquelvir]

Yes. See this example:

"use client"

import { Button } from "@/registry/default/ui/button"
import { ToastAction } from "@/registry/default/ui/toast"
import { useToast } from "@/registry/default/ui/use-toast"
import { useEffect } from "react"
import { useSearchParams } from 'next/navigation'

export default function ToastDemo() {
  const { toast } = useToast()
  const searchParams = useSearchParams()
  useEffect(() => {
    if (searchParams?.get("a") === "b"){
      toast({
        title: "Scheduled: Catch up ",
        description: "Friday, February 10, 2023 at 5:57 PM",
        action: (
          <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
        ),
      })
    }
  }, [toast, searchParams])

  return (
    <Button
      variant="outline"
      onClick={() => {
        
      }}
    >
      Add to calendar
    </Button>
  )
}