Custom variants of toast when using headless mode about react-hot-toast HOT 12 OPEN

Thanks for the input. This definitely something that should be possible, but isn't right now.

Would an API like this work for you?

// ⚠️ Draft, not an actual API
import { createCustomToaster } from 'react-hot-toast'

const { useToaster, Toaster, toast } = createCustomToaster([ "info", "custom" ])

<Toaster
  toastOptions={{
    info: {
     icon: "💡"
    }
  }}
/>

toast.info("Did you know...")

from react-hot-toast.

hey guys 👋🏻
any progress on that feature or maybe simple workaround? I have similar issue for warning variant and it doesn't seem too intuitive to use e.g. toast('This is warning message'); by default

from react-hot-toast.

Hi, has there been any progress on this, it would be really useful just to be able to create a warning variant type and similar?

from react-hot-toast.

One thing I'd like to tack on here, is that in my current project, I have a similar need for custom variants, but I'm also having extra props being passed through the ToastOptions as well to support our Alert component. It works pretty well, though I had to recreate the toast function and do type casting to make typescript not complain.

from react-hot-toast.

I basically had to wrap the original toast function calls and create my own to be able to expand the type definitions to include the props we wanted.

Then I followed https://react-hot-toast.com/docs/use-toaster to some extent, although I ended up referring back to the original code in the github for the Toaster component. I made my own Toaster component that rendered my custom Alerts. It was a lot of work, but it's for a component library, so not much to be done about that.

// These are the statuses allowed in the Alert Component
type AlertStatus = 'error'|'success'|'info'|'warning'|'loading';
export interface Toast {
 type: AlertStatus,
 // other normal Toast options
 duration?: number;
 role: 'status' | 'alert';
 ariaLive: 'assertive' | 'off' | 'polite';
 //extra props meant for the Alert component we are rendering
 solid?: boolean
}
export type ToastOptions = Partial<
  Omit<Toast, 'height' | 'message' | 'pauseDuration' | 'visible'>
>;
export type DefaultToastOptions = ToastOptions &
  {
    [key in AlertStatus]?: ToastOptions;
  };


export type ToastMessage = ValueOrFunction<Renderable, Toast>;
type ToastHandler = (message: ToastMessage, options?: ToastOptions) => string;

const createHandler = (type: AlertStatus) =>
  ((message, options) =>
    // This is needed unfortunately due to types being different despite working
    ogToast(
      message as ValueOrFunction<Renderable, OgToast>,
      {
        ...options,
        type,
      } as OriginalToastOptions,
    )) as ToastHandler;

const toast = (...args: Parameters<ToastHandler>): string =>
  ogToast(...(args as Parameters<typeof ogToast>));
toast.error = createHandler('error');
toast.success = createHandler('success');
toast.info = createHandler('info');
toast.warning = createHandler('warning');
toast.loading = createHandler('loading');
toast.dismiss = ogToast.dismiss;
toast.remove = ogToast.remove;

from react-hot-toast.

I think that you can do something like this:

import { toast as handler } from 'react-hot-toast'

toast.info = msg => handler(msg, {
    style: {}
});

export { toast }

from react-hot-toast.

@mverissimo I'd like to achieve slightly different result. Using useToaster hook, I'd create my own notifications with headless mode and have custom toast variants. Documentation.

from react-hot-toast.

Yep, this looks good to me! It would be great if I can just pass custom toast variant to the Toaster as in your example, without creating completely custom component with headless mode.

from react-hot-toast.

The benefit of the proposed method is, that it also adds the toast.custom() to the toast function. Also it makes all options type-safe with auto-complete.

from react-hot-toast.

Yeah, that's awesome. I really like this method.

from react-hot-toast.

@ZachHaber do you mind expanding on how you setup a custom Alert toast? I am looking to add one as well

from react-hot-toast.

@ZachHaber thanks for the detailed example! I think I may try to hold out for v2 and just style the default toast as an alert for now. Not sure when v2 is planned to release though

from react-hot-toast.