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 }),
});