forward additional data to toastOptions

[popuguytheparrot]

Hello. Thanks for this library. Nice to use.

It would also be more convenient to be able to pass the date through the options

For example

toast('message', { data: { title: 'Bar', callback: () => { console.log('clicked)' }}})

This will be very handy for custom components with variable designs.

[venanciorodrigo]

⬆️

[asamad35]

@popuguytheparrot can you please explain with a use case ?

[designbyadrian]

@popuguytheparrot can you please explain with a use case ?

Use case: adding multiple rows of text to a custom toaster instead of using toast.custom

https://tailwindui.com/components/application-ui/overlays/notifications

[mordv]

I'm surprised this is still not implemented. Here's simple hack for those who need it. If you need to pass objects as data, add simple serialization-deserialization logic.

import { resolveValue, toast, Toaster, ToastIcon, ToastOptions } from "react-hot-toast";

...

export interface MyToastOptions extends ToastOptions {
  data?: string;
}

const dataSeparatorHack = 'c====8';
export const myToast = {
  error: (msg: string, { data, ...options }: MyToastOptions = {}) =>
    toast.error(`${msg}${data ? `${dataSeparatorHack}${data}` : ''}`, {
      duration: 3000,
      ...options,
    }),
};

...

export const MyToast: React.FC = () => {
  return (
    <Toaster position="top-right">
      {(t) => {
        const split = (resolveValue(t.message, t) as string).split(dataSeparatorHack);
        const msg = split[0];
        const data = split[1];
...