UNPKG

13.8 kBTypeScriptView Raw
1import * as React from 'react';
2import React__default, { HTMLAttributes } from 'react';
3
4interface CloseButtonProps {
5 closeToast: CloseToastFunc;
6 type: TypeOptions;
7 ariaLabel?: string;
8 theme: Theme;
9}
10declare function CloseButton({ closeToast, theme, ariaLabel }: CloseButtonProps): React__default.JSX.Element;
11
12declare function ToastContainer(props: ToastContainerProps): React__default.JSX.Element;
13
14declare const Bounce: ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React.JSX.Element;
15declare const Slide: ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React.JSX.Element;
16declare const Zoom: ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React.JSX.Element;
17declare const Flip: ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React.JSX.Element;
18
19/**
20 * Used when providing custom icon
21 */
22interface IconProps {
23 theme: Theme;
24 type: TypeOptions;
25 isLoading?: boolean;
26}
27type BuiltInIconProps = React__default.SVGProps<SVGSVGElement> & IconProps;
28declare function Warning(props: BuiltInIconProps): React__default.JSX.Element;
29declare function Info(props: BuiltInIconProps): React__default.JSX.Element;
30declare function Success(props: BuiltInIconProps): React__default.JSX.Element;
31declare function Error(props: BuiltInIconProps): React__default.JSX.Element;
32declare function Spinner(): React__default.JSX.Element;
33declare const Icons: {
34 info: typeof Info;
35 warning: typeof Warning;
36 success: typeof Success;
37 error: typeof Error;
38 spinner: typeof Spinner;
39};
40
41declare function isToastActive(id: Id, containerId?: Id): boolean;
42declare const clearWaitingQueue: (p?: ClearWaitingQueueParams) => void;
43
44type Nullable<T> = {
45 [P in keyof T]: T[P] | null;
46};
47type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default';
48type Theme = 'light' | 'dark' | 'colored' | (string & {});
49type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
50type CloseToastFunc = ((reason?: boolean | string) => void) & ((e: React__default.MouseEvent) => void);
51interface ToastContentProps<Data = unknown> {
52 closeToast: CloseToastFunc;
53 toastProps: ToastProps;
54 isPaused: boolean;
55 data: Data;
56}
57type ToastContent<T = unknown> = React__default.ReactNode | ((props: ToastContentProps<T>) => React__default.ReactNode);
58type ToastIcon = false | ((props: IconProps) => React__default.ReactNode) | React__default.ReactElement<IconProps>;
59type Id = number | string;
60type ToastTransition = React__default.FC<ToastTransitionProps> | React__default.ComponentClass<ToastTransitionProps>;
61/**
62 * ClassName for the elements - can take a function to build a classname or a raw string that is cx'ed to defaults
63 */
64type ToastClassName = ((context?: {
65 type?: TypeOptions;
66 defaultClassName?: string;
67 position?: ToastPosition;
68 rtl?: boolean;
69}) => string) | string;
70interface ClearWaitingQueueParams {
71 containerId?: Id;
72}
73type DraggableDirection = 'x' | 'y';
74interface CommonOptions {
75 /**
76 * Pause the timer when the mouse hover the toast.
77 * `Default: true`
78 */
79 pauseOnHover?: boolean;
80 /**
81 * Pause the toast when the window loses focus.
82 * `Default: true`
83 */
84 pauseOnFocusLoss?: boolean;
85 /**
86 * Remove the toast when clicked.
87 * `Default: false`
88 */
89 closeOnClick?: boolean;
90 /**
91 * Set the delay in ms to close the toast automatically.
92 * Use `false` to prevent the toast from closing.
93 * `Default: 5000`
94 */
95 autoClose?: number | false;
96 /**
97 * Set the default position to use.
98 * `One of: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'`
99 * `Default: 'top-right'`
100 */
101 position?: ToastPosition;
102 /**
103 * Pass a custom close button.
104 * To remove the close button pass `false`
105 */
106 closeButton?: boolean | ((props: CloseButtonProps) => React__default.ReactNode) | React__default.ReactElement<CloseButtonProps>;
107 /**
108 * An optional css class to set for the progress bar.
109 */
110 progressClassName?: ToastClassName;
111 /**
112 * Hide or show the progress bar.
113 * `Default: false`
114 */
115 hideProgressBar?: boolean;
116 /**
117 * Pass a custom transition see https://fkhadra.github.io/react-toastify/custom-animation/
118 */
119 transition?: ToastTransition;
120 /**
121 * Allow toast to be draggable
122 * `Default: 'touch'`
123 */
124 draggable?: boolean | 'mouse' | 'touch';
125 /**
126 * The percentage of the toast's width it takes for a drag to dismiss a toast
127 * `Default: 80`
128 */
129 draggablePercent?: number;
130 /**
131 * Specify in which direction should you swipe to dismiss the toast
132 * `Default: "x"`
133 */
134 draggableDirection?: DraggableDirection;
135 /**
136 * Define the ARIA role for the toast
137 * `Default: alert`
138 * https://www.w3.org/WAI/PF/aria/roles
139 */
140 role?: string;
141 /**
142 * Set id to handle multiple container
143 */
144 containerId?: Id;
145 /**
146 * Fired when clicking inside toaster
147 */
148 onClick?: (event: React__default.MouseEvent) => void;
149 /**
150 * Support right to left display.
151 * `Default: false`
152 */
153 rtl?: boolean;
154 /**
155 * Used to display a custom icon. Set it to `false` to prevent
156 * the icons from being displayed
157 */
158 icon?: ToastIcon;
159 /**
160 * Theme to use.
161 * `One of: 'light', 'dark', 'colored'`
162 * `Default: 'light'`
163 */
164 theme?: Theme;
165 /**
166 * When set to `true` the built-in progress bar won't be rendered at all. Autoclose delay won't have any effect as well
167 * This is only used when you want to replace the progress bar with your own.
168 *
169 * See https://stackblitz.com/edit/react-toastify-custom-progress-bar?file=src%2FApp.tsx for an example.
170 */
171 customProgressBar?: boolean;
172}
173interface ToastOptions<Data = unknown> extends CommonOptions {
174 /**
175 * An optional css class to set.
176 */
177 className?: ToastClassName;
178 /**
179 * Called when toast is mounted.
180 */
181 onOpen?: () => void;
182 /**
183 * Called when toast is unmounted.
184 * The callback first argument is the closure reason.
185 * It is "true" when the notification is closed by a user action like clicking on the close button.
186 */
187 onClose?: (reason?: boolean | string) => void;
188 /**
189 * An optional inline style to apply.
190 */
191 style?: React__default.CSSProperties;
192 /**
193 * Set the toast type.
194 * `One of: 'info', 'success', 'warning', 'error', 'default'`
195 */
196 type?: TypeOptions;
197 /**
198 * Set a custom `toastId`
199 */
200 toastId?: Id;
201 /**
202 * Used during update
203 */
204 updateId?: Id;
205 /**
206 * Set the percentage for the controlled progress bar. `Value must be between 0 and 1.`
207 */
208 progress?: number;
209 /**
210 * Let you provide any data, useful when you are using your own component
211 */
212 data?: Data;
213 /**
214 * Let you specify the aria-label
215 */
216 ariaLabel?: string;
217 /**
218 * Add a delay in ms before the toast appear.
219 */
220 delay?: number;
221 isLoading?: boolean;
222}
223interface UpdateOptions<T = unknown> extends Nullable<ToastOptions<T>> {
224 /**
225 * Used to update a toast.
226 * Pass any valid ReactNode(string, number, component)
227 */
228 render?: ToastContent<T>;
229}
230interface ToastContainerProps extends CommonOptions, Pick<HTMLAttributes<HTMLElement>, 'aria-label'> {
231 /**
232 * An optional css class to set.
233 */
234 className?: ToastClassName;
235 /**
236 * Will stack the toast with the newest on the top.
237 */
238 stacked?: boolean;
239 /**
240 * Whether or not to display the newest toast on top.
241 * `Default: false`
242 */
243 newestOnTop?: boolean;
244 /**
245 * An optional inline style to apply.
246 */
247 style?: React__default.CSSProperties;
248 /**
249 * An optional inline style to apply for the toast.
250 */
251 toastStyle?: React__default.CSSProperties;
252 /**
253 * An optional css class for the toast.
254 */
255 toastClassName?: ToastClassName;
256 /**
257 * Limit the number of toast displayed at the same time
258 */
259 limit?: number;
260 /**
261 * Shortcut to focus the first notification with the keyboard
262 * `default: Alt+t`
263 *
264 * ```
265 * // focus when user presses ⌘ + F
266 * const matchShortcut = (e: KeyboardEvent) => e.metaKey && e.key === 'f'
267 * ```
268 */
269 hotKeys?: (e: KeyboardEvent) => boolean;
270}
271interface ToastTransitionProps {
272 isIn: boolean;
273 done: () => void;
274 position: ToastPosition | string;
275 preventExitTransition: boolean;
276 nodeRef: React__default.RefObject<HTMLElement>;
277 children?: React__default.ReactNode;
278 playToast(): void;
279}
280/**
281 * @INTERNAL
282 */
283interface ToastProps extends ToastOptions {
284 isIn: boolean;
285 staleId?: Id;
286 toastId: Id;
287 key: Id;
288 transition: ToastTransition;
289 closeToast: CloseToastFunc;
290 position: ToastPosition;
291 children?: ToastContent;
292 draggablePercent: number;
293 draggableDirection?: DraggableDirection;
294 progressClassName?: ToastClassName;
295 className?: ToastClassName;
296 deleteToast: () => void;
297 theme: Theme;
298 type: TypeOptions;
299 collapseAll: () => void;
300 stacked?: boolean;
301}
302type ToastItemStatus = 'added' | 'removed' | 'updated';
303interface ToastItem<Data = {}> {
304 content: ToastContent<Data>;
305 id: Id;
306 theme?: Theme;
307 type?: TypeOptions;
308 isLoading?: boolean;
309 containerId?: Id;
310 data: Data;
311 icon?: ToastIcon;
312 status: ToastItemStatus;
313 reason?: boolean | string;
314}
315type OnChangeCallback = (toast: ToastItem) => void;
316type IdOpts = {
317 id?: Id;
318 containerId?: Id;
319};
320type ClearWaitingQueueFunc = typeof clearWaitingQueue;
321
322declare const enum Default {
323 COLLAPSE_DURATION = 300,
324 DEBOUNCE_DURATION = 50,
325 CSS_NAMESPACE = "Toastify",
326 DRAGGABLE_PERCENT = 80,
327 CONTAINER_ID = 1
328}
329
330interface CSSTransitionProps {
331 /**
332 * Css class to apply when toast enter
333 */
334 enter: string;
335 /**
336 * Css class to apply when toast leave
337 */
338 exit: string;
339 /**
340 * Append current toast position to the classname.
341 * If multiple classes are provided, only the last one will get the position
342 * For instance `myclass--top-center`...
343 * `Default: false`
344 */
345 appendPosition?: boolean;
346 /**
347 * Collapse toast smoothly when exit animation end
348 * `Default: true`
349 */
350 collapse?: boolean;
351 /**
352 * Collapse transition duration
353 * `Default: 300`
354 */
355 collapseDuration?: number;
356}
357/**
358 * Css animation that just work.
359 * You could use animate.css for instance
360 *
361 *
362 * ```
363 * cssTransition({
364 * enter: "animate__animated animate__bounceIn",
365 * exit: "animate__animated animate__bounceOut"
366 * })
367 * ```
368 *
369 */
370declare function cssTransition({ enter, exit, appendPosition, collapse, collapseDuration }: CSSTransitionProps): ({ children, position, preventExitTransition, done, nodeRef, isIn, playToast }: ToastTransitionProps) => React__default.JSX.Element;
371
372/**
373 * Used to collapse toast after exit animation
374 */
375declare function collapseToast(node: HTMLElement, done: () => void, duration?: Default): void;
376
377declare function toast<TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>): Id;
378declare namespace toast {
379 var loading: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
380 var promise: typeof handlePromise;
381 var success: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
382 var info: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
383 var error: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
384 var warning: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
385 var warn: <TData = unknown>(content: ToastContent<TData>, options?: ToastOptions<TData>) => Id;
386 var dark: (content: ToastContent, options?: ToastOptions) => Id;
387 var dismiss: {
388 (params: RemoveParams): void;
389 (params?: Id): void;
390 };
391 var clearWaitingQueue: (p?: ClearWaitingQueueParams) => void;
392 var isActive: typeof isToastActive;
393 var update: <TData = unknown>(toastId: Id, options?: UpdateOptions<TData>) => void;
394 var done: (id: Id) => void;
395 var onChange: (cb: OnChangeCallback) => () => void;
396 var play: (opts?: IdOpts) => void;
397 var pause: (opts?: IdOpts) => void;
398}
399interface ToastPromiseParams<TData = unknown, TError = unknown, TPending = unknown> {
400 pending?: string | UpdateOptions<TPending>;
401 success?: string | UpdateOptions<TData>;
402 error?: string | UpdateOptions<TError>;
403}
404declare function handlePromise<TData = unknown, TError = unknown, TPending = unknown>(promise: Promise<TData> | (() => Promise<TData>), { pending, error, success }: ToastPromiseParams<TData, TError, TPending>, options?: ToastOptions<TData>): Promise<TData>;
405interface RemoveParams {
406 id?: Id;
407 containerId: Id;
408}
409
410export { Bounce, type ClearWaitingQueueFunc, type ClearWaitingQueueParams, CloseButton, type CloseButtonProps, type DraggableDirection, Flip, type IconProps, Icons, type Id, type OnChangeCallback, Slide, type Theme, type ToastClassName, ToastContainer, type ToastContainerProps, type ToastContent, type ToastContentProps, type ToastItem, type ToastOptions, type ToastPosition, type ToastPromiseParams, type ToastTransition, type ToastTransitionProps, type TypeOptions, type UpdateOptions, Zoom, collapseToast, cssTransition, toast };