react-toastify

  • Version 8.0.3
  • Published
  • 443 kB
  • 1 dependency
  • MIT license

Install

npm i react-toastify
yarn add react-toastify
pnpm add react-toastify

Overview

React notification made easy

Index

Variables

variable Icons

const Icons: {
info: typeof Info;
warning: typeof Warning;
success: typeof Success;
error: typeof Error;
spinner: typeof Spinner;
};

    variable toast

    const toast: {
    (content: ToastContent, options?: ToastOptions<{}> | undefined): any;
    loading(content: ToastContent, options?: ToastOptions<{}> | undefined): any;
    promise: typeof handlePromise;
    success: (content: ToastContent, options?: ToastOptions<{}> | undefined) => any;
    info: (content: ToastContent, options?: ToastOptions<{}> | undefined) => any;
    error: (content: ToastContent, options?: ToastOptions<{}> | undefined) => any;
    warning: (content: ToastContent, options?: ToastOptions<{}> | undefined) => any;
    warn: (content: ToastContent, options?: ToastOptions<{}> | undefined) => any;
    dark(content: ToastContent, options?: ToastOptions<{}> | undefined): any;
    dismiss(id?: string | number | undefined): void;
    clearWaitingQueue(params?: ClearWaitingQueueParams): void;
    isActive(id: Id): boolean;
    update(toastId: Id, options?: UpdateOptions): void;
    done(id: Id): void;
    onChange(callback: OnChangeCallback): () => void;
    configure(config?: ToastContainerProps): void;
    POSITION: {
    TOP_LEFT: import('../types').ToastPosition;
    TOP_RIGHT: import('../types').ToastPosition;
    TOP_CENTER: import('../types').ToastPosition;
    BOTTOM_LEFT: import('../types').ToastPosition;
    BOTTOM_RIGHT: import('../types').ToastPosition;
    BOTTOM_CENTER: import('../types').ToastPosition;
    };
    TYPE: {
    INFO: TypeOptions;
    SUCCESS: TypeOptions;
    WARNING: TypeOptions;
    ERROR: TypeOptions;
    DEFAULT: TypeOptions;
    };
    };

      variable ToastContainer

      const ToastContainer: any;

        Functions

        function Bounce

        Bounce: ({
        children,
        position,
        preventExitTransition,
        done,
        nodeRef,
        isIn,
        }: import('..').ToastTransitionProps) => any;

          function collapseToast

          collapseToast: (node: HTMLElement, done: () => void, duration?: Default) => void;
          • Used to collapse toast after exit animation

          function cssTransition

          cssTransition: ({
          enter,
          exit,
          appendPosition,
          collapse,
          collapseDuration,
          }: CSSTransitionProps) => ({
          children,
          position,
          preventExitTransition,
          done,
          nodeRef,
          isIn,
          }: ToastTransitionProps) => any;
          • Css animation that just work. You could use animate.css for instance

            cssTransition({
            enter: "animate__animated animate__bounceIn",
            exit: "animate__animated animate__bounceOut"
            })

          function Flip

          Flip: ({
          children,
          position,
          preventExitTransition,
          done,
          nodeRef,
          isIn,
          }: import('..').ToastTransitionProps) => any;

            function Slide

            Slide: ({
            children,
            position,
            preventExitTransition,
            done,
            nodeRef,
            isIn,
            }: import('..').ToastTransitionProps) => any;

              function useToast

              useToast: (
              props: ToastProps
              ) => {
              playToast: () => void;
              pauseToast: () => void;
              isRunning: boolean;
              preventExitTransition: boolean;
              toastRef: import('react').RefObject<HTMLDivElement>;
              eventHandlers: DOMAttributes<HTMLElement>;
              };

                function useToastContainer

                useToastContainer: (
                props: ToastContainerProps
                ) => {
                getToastToRender: <T>(
                cb: (position: ToastPosition, toastList: Toast[]) => T
                ) => T[];
                collection: Record<Id, Toast>;
                containerRef: any;
                isToastActive: (id: Id) => boolean;
                };

                  function Zoom

                  Zoom: ({
                  children,
                  position,
                  preventExitTransition,
                  done,
                  nodeRef,
                  isIn,
                  }: import('..').ToastTransitionProps) => any;

                    Interfaces

                    interface ClearWaitingQueueParams

                    interface ClearWaitingQueueParams {}

                      property containerId

                      containerId?: Id;

                        interface CloseButtonProps

                        interface CloseButtonProps {}

                          property ariaLabel

                          ariaLabel?: string;

                            property closeToast

                            closeToast: (e: React.MouseEvent<HTMLElement>) => void;

                              property theme

                              theme: Theme;

                                property type

                                type: TypeOptions;

                                  interface IconProps

                                  interface IconProps {}
                                  • Used when providing custom icon

                                  property theme

                                  theme: Theme;

                                    property type

                                    type: TypeOptions;

                                      interface ToastContainerProps

                                      interface ToastContainerProps extends CommonOptions {}

                                        property className

                                        className?: ToastClassName;
                                        • An optional css class to set.

                                        property enableMultiContainer

                                        enableMultiContainer?: boolean;
                                        • Show the toast only if it includes containerId and it's the same as containerId Default: false

                                        property limit

                                        limit?: number;
                                        • Limit the number of toast displayed at the same time

                                        property newestOnTop

                                        newestOnTop?: boolean;
                                        • Whether or not to display the newest toast on top. Default: false

                                        property style

                                        style?: React.CSSProperties;
                                        • An optional inline style to apply.

                                        property toastClassName

                                        toastClassName?: ToastClassName;
                                        • An optional css class for the toast.

                                        property toastStyle

                                        toastStyle?: React.CSSProperties;
                                        • An optional inline style to apply for the toast.

                                        interface ToastContentProps

                                        interface ToastContentProps<Data = {}> {}

                                          property closeToast

                                          closeToast?: () => void;

                                            property data

                                            data?: Data;

                                              property toastProps

                                              toastProps: ToastProps;

                                                interface ToastOptions

                                                interface ToastOptions<Data = {}> extends CommonOptions {}

                                                  property className

                                                  className?: ToastClassName;
                                                  • An optional css class to set.

                                                  property data

                                                  data?: Data;

                                                    property delay

                                                    delay?: number;
                                                    • Add a delay in ms before the toast appear.

                                                    property isLoading

                                                    isLoading?: boolean;

                                                      property onClose

                                                      onClose?: <T = {}>(props: T) => void;
                                                      • Called when toast is unmounted.

                                                      property onOpen

                                                      onOpen?: <T = {}>(props: T) => void;
                                                      • Called when toast is mounted.

                                                      property progress

                                                      progress?: number | string;
                                                      • Set the percentage for the controlled progress bar. Value must be between 0 and 1.

                                                      property style

                                                      style?: React.CSSProperties;
                                                      • An optional inline style to apply.

                                                      property toastId

                                                      toastId?: Id;
                                                      • Set a custom toastId

                                                      property type

                                                      type?: TypeOptions;
                                                      • Set the toast type. One of: 'info', 'success', 'warning', 'error', 'default'

                                                      property updateId

                                                      updateId?: Id;
                                                      • Used during update

                                                      interface ToastTransitionProps

                                                      interface ToastTransitionProps {}

                                                        property children

                                                        children?: React.ReactNode;

                                                          property done

                                                          done: () => void;

                                                            property isIn

                                                            isIn: boolean;

                                                              property nodeRef

                                                              nodeRef: React.RefObject<HTMLElement>;

                                                                property position

                                                                position: ToastPosition | string;

                                                                  property preventExitTransition

                                                                  preventExitTransition: boolean;

                                                                    interface UpdateOptions

                                                                    interface UpdateOptions extends Nullable<ToastOptions> {}

                                                                      property render

                                                                      render?: ToastContent;
                                                                      • Used to update a toast. Pass any valid ReactNode(string, number, component)

                                                                      Type Aliases

                                                                      type DraggableDirection

                                                                      type DraggableDirection = 'x' | 'y';

                                                                        type Id

                                                                        type Id = number | string;

                                                                          type Theme

                                                                          type Theme = 'light' | 'dark' | 'colored';

                                                                            type ToastClassName

                                                                            type ToastClassName =
                                                                            | ((context?: {
                                                                            type?: TypeOptions;
                                                                            defaultClassName?: string;
                                                                            position?: ToastPosition;
                                                                            rtl?: boolean;
                                                                            }) => string)
                                                                            | string;
                                                                            • ClassName for the elements - can take a function to build a classname or a raw string that is cx'ed to defaults

                                                                            type ToastContent

                                                                            type ToastContent =
                                                                            | React.ReactNode
                                                                            | ((props: ToastContentProps) => React.ReactNode);

                                                                              type ToastPosition

                                                                              type ToastPosition =
                                                                              | 'top-right'
                                                                              | 'top-center'
                                                                              | 'top-left'
                                                                              | 'bottom-right'
                                                                              | 'bottom-center'
                                                                              | 'bottom-left';

                                                                                type ToastTransition

                                                                                type ToastTransition =
                                                                                | React.FC<ToastTransitionProps>
                                                                                | React.ComponentClass<ToastTransitionProps>;

                                                                                  type TypeOptions

                                                                                  type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default';

                                                                                    Package Files (11)

                                                                                    Dependencies (1)

                                                                                    Dev Dependencies (17)

                                                                                    Peer Dependencies (2)

                                                                                    Badge

                                                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-toastify.

                                                                                    • Markdown
                                                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-toastify)
                                                                                    • HTML
                                                                                      <a href="https://www.jsdocs.io/package/react-toastify"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>