Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom variants of toast when using headless mode #23

Open
mrkldshv opened this issue Jan 6, 2021 · 12 comments
Open

Custom variants of toast when using headless mode #23

mrkldshv opened this issue Jan 6, 2021 · 12 comments
Labels
enhancement New feature or request

Comments

@mrkldshv
Copy link

mrkldshv commented Jan 6, 2021

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
Copy link

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
Copy link
Author

mrkldshv commented Jan 7, 2021

@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
Copy link
Owner

timolins commented Jan 8, 2021

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
Copy link
Author

mrkldshv commented Jan 8, 2021

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
Copy link
Owner

timolins commented Jan 8, 2021

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
Copy link
Author

mrkldshv commented Jan 8, 2021

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

@timolins timolins added the enhancement New feature or request label Jan 12, 2021
@ZachHaber
Copy link

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
Copy link

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

@ZachHaber
Copy link

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
Copy link

@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
Copy link

MHase commented Apr 25, 2022

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
Copy link

char502 commented Mar 2, 2023

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

7 participants