react-toastify

react-toastify

Version 10.0.6
Published 1 month ago
407 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;
};

Functions

function Bounce

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

function CloseButton

CloseButton: ({
    closeToast,
    theme,
    ariaLabel,
}: CloseButtonProps) => React.JSX.Element;

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,
    playToast,
}: ToastTransitionProps) => React.JSX.Element;

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,
    playToast,
}: import('..').ToastTransitionProps) => any;

function Slide

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

function toast

toast: typeof toast;

function ToastContainer

ToastContainer: (props: ToastContainerProps) => React.JSX.Element;

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[];
    isToastActive: typeof isToastActive;
    count: number | undefined;
};

function Zoom

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

Interfaces

interface ClearWaitingQueueParams

interface ClearWaitingQueueParams {}

property containerId

containerId?: Id;

interface IconProps

interface IconProps {}

Used when providing custom icon

property isLoading

isLoading?: boolean;

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

stacked?: boolean;

Will stack the toast with the newest on the top.

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 = unknown> {}

property closeToast

closeToast: () => void;

property data

data: Data;

property toastProps

toastProps: ToastProps;

interface ToastItem

interface ToastItem<Data = {}> {}

property containerId

containerId?: Id;

property content

content: ToastContent<Data>;

property data

data: Data;

property icon

icon?: ToastIcon;

property id

id: Id;

property isLoading

isLoading?: boolean;

property status

status: ToastItemStatus;

property theme

theme?: Theme;

property type

type?: TypeOptions;

interface ToastOptions

interface ToastOptions<Data = unknown> 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 ToastPromiseParams

interface ToastPromiseParams<
    TData = unknown,
    TError = unknown,
    TPending = unknown
> {}

property error

error?: string | UpdateOptions<TError>;

property pending

pending?: string | UpdateOptions<TPending>;

property success

success?: string | UpdateOptions<TData>;

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;

method playToast

playToast: () => void;

interface UpdateOptions

interface UpdateOptions<T = unknown> extends Nullable<ToastOptions<T>> {}

property render

render?: ToastContent<T>;

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' | (string & {});

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<T = unknown> =
    | React.ReactNode
    | ((props: ToastContentProps<T>) => 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';

Namespaces

namespace toast

namespace toast {}

variable clearWaitingQueue

var clearWaitingQueue: (p?: ClearWaitingQueueParams) => void;

variable dismiss

var dismiss: { (params: RemoveParams): void; (params?: Id | undefined): void };

variable isActive

var isActive: (id: Id, containerId?: Id) => boolean;

variable onChange

var onChange: (cb: OnChangeCallback) => () => void;

variable promise

var promise: <TData = unknown, TError = unknown, TPending = unknown>(
    promise: Promise<TData> | (() => Promise<TData>),
    { pending, error, success }: ToastPromiseParams<TData, TError, TPending>,
    options?: ToastOptions<TData>
) => Promise<TData>;

function dark

dark: (content: ToastContent, options?: ToastOptions<unknown> | undefined) => Id;

function done

done: (id: Id) => void;

function error

error: <TData = unknown>(content: any, options?: ToastOptions<TData>) => Id;

function info

info: <TData = unknown>(content: any, options?: ToastOptions<TData>) => Id;

function loading

loading: <TData = unknown>(content: any, options?: ToastOptions<TData>) => Id;

function pause

pause: (opts?: IdOpts | undefined) => void;

function play

play: (opts?: IdOpts | undefined) => void;

function success

success: <TData = unknown>(content: any, options?: ToastOptions<TData>) => Id;

function update

update: <TData = unknown>(toastId: Id, options?: UpdateOptions<TData>) => void;

function warn

warn: <TData = unknown>(content: any, options?: ToastOptions<TData>) => Id;

function warning

warning: <TData = unknown>(content: any, options?: ToastOptions<TData>) => Id;

Package Files (11)

Dependencies (1)

clsx

Peer Dependencies (2)

Badge

To add a badge like this oneto 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>

Updated 1 month ago.
Package analyzed in 3821 ms.
Missing or incorrect documentation? Open an issue for this package.