More default toast types (toast.info(), toast.warn())

[danqing]

The default success / error states are really great! I wonder if there should also be a default warning state (yellow, maybe exclamation mark) too.

[timolins]

Yes! I think toast.warning() and toast.info() would be nice defaults. I'll see what I can do.

[tobiasbueschel]

Adding to that, shall we include some documentation on how to define your own custom toast types? @timolins Also thanks for the great library 👍

[ilyaskarim]

Is there any updates on this please?

[rlenoir-codepoint]

I would also be interested in having those two!

I already have a custom Toaster component where I map the type to our app theme styles for each case (success/error/warning/info), I am just missing the toast methods to call now :).

[prince272]

Me too ooo! @rlenoir-codepoint

[hibangun]

@rlenoir-codepoint could you please share on how you implement custom taster component for each cases (success/error/warning/info)? :)

[rlenoir-codepoint]

@rlenoir-codepoint could you please share on how you implement custom taster component for each cases (success/error/warning/info)? :)

@hibangun I followed the documentation by extending the ToastBar API, see https://react-hot-toast.com/docs/toast-bar.

In a nutshell:

import { Toast, ToastBar, Toaster } from 'react-hot-toast';

type ToastNotificationType = {
  type: Toast['type'] | 'warning' | 'info';
  // warning + info might be added in future https://github.com/timolins/react-hot-toast/issues/29
};

<Toaster>
      {t => {
        
        // Mapping the toast notification type to the theme styles
        const getTypeStyleProps = (type: ToastNotificationType['type']) => {
          //
          let props = {};

          switch (type) {
            case 'success':
              props = {
                color: 'emerald-900',
                borderColor: 'emerald-300',
                backgroundColor: 'emerald-100',
              };
              break;

            case 'error':
              props = {
                color: 'red-900',
                borderColor: 'red-300',
                backgroundColor: 'red-100',
              };
              break;

            case 'warning':
              props = {
                color: 'amber-900',
                borderColor: 'amber-300',
                backgroundColor: 'amber-100',
              };
              break;

            case 'info':
              props = {
                color: 'blue-900',
                borderColor: 'blue-300',
                backgroundColor: 'blue-100',
              };
              break;

            default:
              props = {};
              break;
          }

          return props;
        };

        return (
          <ToastBar {...props} toast={t}>
            {({ icon, message }) => (
              <StyledToast {...getTypeStyleProps(t.type)}>
                ...
              </StyledToast>
            )}
          </ToastBar>
        );
      }}
    </Toaster>

[maciekgrzybek]

Hey, @timolins is this up for grab? I'd be happy to implement it :)

[huazhuangnan]

@danqing @timolins @hibangun @maciekgrzybek

import type { Toast, ToasterProps } from 'react-hot-toast';

export type Options = Partial<Pick<Toast, "icon" | "duration" | "ariaProps" | "className" | "style" | "position" | "iconTheme">> | undefined;

export const info: Options = {
  icon: <svg>...</svg>,
 iconTheme: {
    primary:  '..',
    secondary:  '...',
  }
}
export const warning: Options = {
  icon: <svg>..</svg>,
  iconTheme: {
    primary:  '..',
    secondary:  '...',
  }
}

export const customToast = Object.assign(toast, {
  info: (message: Message, opts?: Options) => toast(message, { ...opts, ...info }),
  warning: (message: Message, opts?: Options) => toast(message, { ...opts, ...warning }),
});

[codeaid]

What's the situation with this? An issue created more than 3 years ago to add simple info and warning methods still without any resolution?

I was rather surprised to see that a toast library doesn't support these two types/variants. Ended up having to look into other libraries just because of this. Shame, because RHT actually looked pretty good up until then.

[fellypsantos]

What's the situation with this? An issue created more than 3 years ago to add simple info and warning methods still without any resolution?

I was rather surprised to see that a toast library doesn't support these two types/variants. Ended up having to look into other libraries just because of this. Shame, because RHT actually looked pretty good up until then.

In my case that I don't want to change the lib, I nedded to create the feature myself (not this one requested here), now I'm using my own modified version, since the pull requests are not being approved or denied.