Within a 13.4 Nextjs project (app router), utilizing Typescript and TailwindCSS.
I am currently exploring the usage of toasts provided by the remarkable shadcnUI Library, which draws inspiration from react-hot-toast while adding its own unique flair.
Implementing the toast's core functionalities posed no issues for me initially. However, things took a turn when I attempted to include a timer bar at the bottom of each toast to display the duration of the toast.
I was able to successfully display the timer bar (a customized progress bar element) and synchronize it with the duration of each toast.
During this process, I noticed that the actual duration of the toast did not align with the props I assigned to it or the value designated in the TOAST_REMOVE_DELAY constant within the use-toast.ts file of the shadcn component.
I experimented with various configurations, only to discover that the Toaster had a default duration of 5000ms (5s), set by the root toaster inherited from react-hot-toast. Surprisingly, the "duration" value provided as props within the individual Toast component did not override this default setting.
After tinkering with the code extensively, I struggled to pass the duration prop effectively and make it the sole determinant of the toast's duration (excluding null values, where the default value is applied).
To anyone willing to offer assistance...
Here is the use toast:
import * as React from "react"
import type {
ToastActionElement,
ToastProps,
} from "@/components/ui/toast"
const TOAST_LIMIT = 3
export const TOAST_REMOVE_DELAY = 2000
type ToasterToast = ToastProps & {
id: string
title?: React.ReactNode
description?: React.ReactNode
action?: ToastActionElement
duration?: number
}
...
Here is the Toaster:
/** @format */
'use client';
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from '@/components/ui/toast';
import { useToast } from '@/components/ui/use-toast';
import { TimerBar } from '@/components/ui/timerBar';
import { TOAST_REMOVE_DELAY } from '@/components/ui/use-toast';
...
Here is the Toast (not crucial but valuable for replication):
/** @format */
import * as React from 'react';
import * as ToastPrimitives from '@radix-ui/react-toast';
import { cva, type VariantProps } from 'class-variance-authority';
import { Icon } from '@/components/icons/icons';
import { cn } from '@/lib/helpers/utils';
...
<p>I've explored different options:</p>
<ul>
<li>Directly modifying the TOAST_REMOVE_DELAY constant (to no avail)</li>
<li>Incorporating an additional timer within the setTimeout function of addToRemoveQueue</li>
</ul>
<pre><code>const addToRemoveQueue = (toastId: string, delay: number) => {
if (toastTimeouts.has(toastId)) {
return
}
...
It seems even the default TOAST_REMOVE_DELAY does not impact the toast duration. Although set to 1000000, the toasts persist for only 5000 milliseconds each.
I attempted to introduce another timer triggering the DISMISS_TOAST action, yet it only functions for durations shorter than 5 seconds. Beyond that, the Toaster's built-in timer overrides the custom setup.
Considering whether this issue may be specific to Development Mode, I deployed the solution into production with similar outcomes.