Custom variants of toast when using headless mode

[mrkldshv]

Hi! Is it possible to provide any custom variants of toast with the headless mode? It would be great, if we could create Notifications component and have own success, error and other toast's variants to use it, as:

toast.custom('My custom toast variant')

[mverissimo]

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 }

[mrkldshv]

@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.

[timolins]

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...")

[mrkldshv]

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.

[timolins]

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.

[mrkldshv]

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

[ZachHaber]

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.

[lsbyerley]

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

[ZachHaber]

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;

[lsbyerley]

@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

[MHase]

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

[char502]

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?