react-toastify

react-toastify

Version 11.0.2
Published 5 days ago
536 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,
}: ToastTransitionProps) => React.JSX.Element;

function clearWaitingQueue

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

function CloseButton

CloseButton: ({
    closeToast,
    theme,
    ariaLabel,
}: CloseButtonProps) => React__default.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__default.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 Error

Error: (props: BuiltInIconProps) => React__default.JSX.Element;

function Flip

Flip: ({
    children,
    position,
    preventExitTransition,
    done,
    nodeRef,
    isIn,
    playToast,
}: ToastTransitionProps) => React.JSX.Element;

function handlePromise

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

function Info

Info: (props: BuiltInIconProps) => React__default.JSX.Element;

function isToastActive

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

function Slide

Slide: ({
    children,
    position,
    preventExitTransition,
    done,
    nodeRef,
    isIn,
    playToast,
}: ToastTransitionProps) => React.JSX.Element;

function Spinner

Spinner: () => React__default.JSX.Element;

function Success

Success: (props: BuiltInIconProps) => React__default.JSX.Element;

function toast

toast: typeof toast;

function ToastContainer

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

function Warning

Warning: (props: BuiltInIconProps) => React__default.JSX.Element;

function Zoom

Zoom: ({
    children,
    position,
    preventExitTransition,
    done,
    nodeRef,
    isIn,
    playToast,
}: ToastTransitionProps) => React.JSX.Element;

Interfaces

interface ClearWaitingQueueParams

interface ClearWaitingQueueParams {}

property containerId

containerId?: Id;

interface CloseButtonProps

interface CloseButtonProps {}

property ariaLabel

ariaLabel?: string;

property closeToast

closeToast: CloseToastFunc;

property theme

theme: Theme;

property type

type: TypeOptions;

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,
        Pick<HTMLAttributes<HTMLElement>, 'aria-label'> {}

property className

className?: ToastClassName;

An optional css class to set.

property hotKeys

hotKeys?: (e: KeyboardEvent) => boolean;

Shortcut to focus the first notification with the keyboard default: Alt+t

// focus when user presses ⌘ + F
const matchShortcut = (e: KeyboardEvent) => e.metaKey && e.key === 'f'

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__default.CSSProperties;

An optional inline style to apply.

property toastClassName

toastClassName?: ToastClassName;

An optional css class for the toast.

property toastStyle

toastStyle?: React__default.CSSProperties;

An optional inline style to apply for the toast.

interface ToastContentProps

interface ToastContentProps<Data = unknown> {}

property closeToast

closeToast: CloseToastFunc;

property data

data: Data;

property isPaused

isPaused: boolean;

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 reason

reason?: boolean | string;

property status

status: ToastItemStatus;

property theme

theme?: Theme;

property type

type?: TypeOptions;

interface ToastOptions

interface ToastOptions<Data = unknown> extends CommonOptions {}

property ariaLabel

ariaLabel?: string;

Let you specify the aria-label

property className

className?: ToastClassName;

An optional css class to set.

property data

data?: Data;

Let you provide any data, useful when you are using your own component

property delay

delay?: number;

Add a delay in ms before the toast appear.

property isLoading

isLoading?: boolean;

property onClose

onClose?: (reason?: boolean | string) => void;

Called when toast is unmounted. The callback first argument is the closure reason. It is "true" when the notification is closed by a user action like clicking on the close button.

property onOpen

onOpen?: () => void;

Called when toast is mounted.

property progress

progress?: number;

Set the percentage for the controlled progress bar. Value must be between 0 and 1.

property style

style?: React__default.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__default.ReactNode;

property done

done: () => void;

property isIn

isIn: boolean;

property nodeRef

nodeRef: React__default.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 ClearWaitingQueueFunc

type ClearWaitingQueueFunc = typeof clearWaitingQueue;

type DraggableDirection

type DraggableDirection = 'x' | 'y';

type Id

type Id = number | string;

type OnChangeCallback

type OnChangeCallback = (toast: ToastItem) => void;

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__default.ReactNode
    | ((props: ToastContentProps<T>) => React__default.ReactNode);

type ToastPosition

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

type ToastTransition

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

type TypeOptions

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

Namespaces

namespace toast

namespace toast {}

variable dismiss

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

variable isActive

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

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 clearWaitingQueue

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

function dark

dark: (content: ToastContent, options?: ToastOptions) => 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 onChange

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

function pause

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

function play

play: (opts?: IdOpts) => 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 (1)

dist/index.d.ts

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 4 days ago.
Package analyzed in 3625 ms.
Missing or incorrect documentation? Open an issue for this package.