Code Monkey home page Code Monkey logo

Comments (9)

timolins avatar timolins commented on May 30, 2024 21

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

from react-hot-toast.

ilyaskarim avatar ilyaskarim commented on May 30, 2024 10

Is there any updates on this please?

from react-hot-toast.

maciekgrzybek avatar maciekgrzybek commented on May 30, 2024 3

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

from react-hot-toast.

huazhuangnan avatar huazhuangnan commented on May 30, 2024 1

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

from react-hot-toast.

tobiasbueschel avatar tobiasbueschel commented on May 30, 2024

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

from react-hot-toast.

rlenoir-codepoint avatar rlenoir-codepoint commented on May 30, 2024

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

from react-hot-toast.

prince272 avatar prince272 commented on May 30, 2024

Me too ooo! @rlenoir-codepoint

from react-hot-toast.

hibangun avatar hibangun commented on May 30, 2024

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

from react-hot-toast.

rlenoir-codepoint avatar rlenoir-codepoint commented on May 30, 2024

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

from react-hot-toast.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.