[Toast] Single Toast that receives emitted messages

[edqwerty1]

Hi all,
I have a requirement to create a Toast to display global messages (api failures etc), where only one message will be shown at a time. If a new message needs to be displayed while one is already visible, it should close the existing toast and open the new one.

One approach would be to useEffect( setOpen(true), [message]) inside my toast component, but this is an abuse of useEffect I believe? And because the duration isn't changing, the Toast closes too early (it doesn't treat this as a reset and uses the initial opens duration).

So I ended up copying your useImperativeHandle example to allow me to emit to this toast component, just wondering if this is the best approach as using this hook isn't a normal practice for me?

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'openToast': {
      return {
        open: true,
        message: action.message,
        variant: action.variant,
      };
    }
    case 'closeToast': {
      return {
        ...state,
        open: false,
      };
    }
  }
}

interface ToastProps {
  displayTimeoutMilliseconds: number;
}
let timer: null | ReturnType<typeof setTimeout> = null;
export const Toast = React.forwardRef(
  (
    { displayTimeoutMilliseconds }: ToastProps,
    forwardedRef
  ): JSX.Element => {
    const [{ open, message, variant }, dispatch] = useReducer(reducer, initialState);

    React.useImperativeHandle(forwardedRef, () => ({
      publish: (message: string, variant: ToastVariant) => {
        if (timer) clearTimeout(timer);
        if (open) {
          dispatch({ type: 'closeToast' });
          timer = setTimeout(() => {
            dispatch({ type: 'openToast', message, variant });
          }, 500);
        } else {
          dispatch({ type: 'openToast', message, variant });
        }
      },
    }));

    const Icon = Icons[variant];
    return (
      <>
        <ToastPrimitive.Provider duration={displayTimeoutMilliseconds}>
          <ToastPrimitive.Root
            className={clsx(styles['toast-root'], ToastVariant[variant])}
            open={open}
            onOpenChange={(_open: boolean) => dispatch({ type: 'closeToast' })}
          >
           ...message
          </ToastPrimitive.Root>
          <ToastPrimitive.Viewport
            className={clsx(styles['toast-viewport'])}
          ></ToastPrimitive.Viewport>
        </ToastPrimitive.Provider>
      </>
    );
  }
);

Parent component plugs into a redux store that is acting as my ESB, so on state changes I can call:

(savedRef.current as any).publish(message, variant);

[benoitgrelard]

If a new message needs to be displayed while one is already visible, it should close the existing toast and open the new one.

Wouldn't this break toast accessibility as one might not have time to read a given message?