Open mrkldshv opened 3 years ago
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 }
@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.
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...")
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.
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.
Yeah, that's awesome. I really like this method.
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.
@ZachHaber do you mind expanding on how you setup a custom Alert
toast? I am looking to add one as well
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;
@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
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
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?
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 ownsuccess
,error
and other toast's variants to use it, as: