Skip to content

Commit 2b26a9c

Browse files
committed
Add more jsdocs
1 parent f6c3531 commit 2b26a9c

File tree

3 files changed

+46
-31
lines changed

3 files changed

+46
-31
lines changed

src/index.tsx

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -84,12 +84,10 @@ const Toast = (props: ToastProps) => {
8484
duration: durationFromToaster,
8585
position,
8686
gap,
87-
loadingIcon: loadingIconProp,
8887
expandByDefault,
8988
classNames,
9089
icons,
9190
closeButtonAriaLabel = 'Close toast',
92-
pauseWhenPageIsHidden,
9391
} = props;
9492
const [swipeDirection, setSwipeDirection] = React.useState<'x' | 'y' | null>(null);
9593
const [swipeOutDirection, setSwipeOutDirection] = React.useState<'left' | 'right' | 'up' | 'down' | null>(null);
@@ -226,14 +224,14 @@ const Toast = (props: ToastProps) => {
226224
}, remainingTime.current);
227225
};
228226

229-
if (expanded || interacting || (pauseWhenPageIsHidden && isDocumentHidden)) {
227+
if (expanded || interacting || isDocumentHidden) {
230228
pauseTimer();
231229
} else {
232230
startTimer();
233231
}
234232

235233
return () => clearTimeout(timeoutId);
236-
}, [expanded, interacting, toast, toastType, pauseWhenPageIsHidden, isDocumentHidden, deleteToast]);
234+
}, [expanded, interacting, toast, toastType, isDocumentHidden, deleteToast]);
237235

238236
React.useEffect(() => {
239237
if (toast.delete) {
@@ -253,16 +251,6 @@ const Toast = (props: ToastProps) => {
253251
);
254252
}
255253

256-
if (loadingIconProp) {
257-
return (
258-
<div
259-
className={cn(classNames?.loader, toast?.classNames?.loader, 'sonner-loader')}
260-
data-visible={toastType === 'loading'}
261-
>
262-
{loadingIconProp}
263-
</div>
264-
);
265-
}
266254
return <Loader className={cn(classNames?.loader, toast?.classNames?.loader)} visible={toastType === 'loading'} />;
267255
}
268256

@@ -600,10 +588,8 @@ const Toaster = React.forwardRef<HTMLElement, ToasterProps>(function Toaster(pro
600588
toastOptions,
601589
dir = getDocumentDirection(),
602590
gap = GAP,
603-
loadingIcon,
604591
icons,
605592
containerAriaLabel = 'Notifications',
606-
pauseWhenPageIsHidden,
607593
} = props;
608594
const [toasts, setToasts] = React.useState<ToastT[]>([]);
609595
const possiblePositions = React.useMemo(() => {
@@ -858,9 +844,7 @@ const Toaster = React.forwardRef<HTMLElement, ToasterProps>(function Toaster(pro
858844
setHeights={setHeights}
859845
expandByDefault={expand}
860846
gap={gap}
861-
loadingIcon={loadingIcon}
862847
expanded={expanded}
863-
pauseWhenPageIsHidden={pauseWhenPageIsHidden}
864848
swipeDirections={props.swipeDirections}
865849
/>
866850
))}

src/types.ts

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -132,35 +132,69 @@ type Offset =
132132
| number;
133133

134134
export interface ToasterProps {
135+
/** Whether to invert the toast colors, useful if you want your toast to stand out
136+
*
137+
* @default false
138+
*/
135139
invert?: boolean;
136140
theme?: 'light' | 'dark' | 'system';
137141
position?: Position;
142+
/**
143+
* The keys to use as the keyboard shortcut that will move focus to the toast viewport.
144+
* @default ['altKey', 'KeyT']
145+
*/
138146
hotkey?: string[];
139147
richColors?: boolean;
148+
/** Disables toast stacking and renders them on top of each other if `true`
149+
*
150+
* @default false
151+
*/
140152
expand?: boolean;
153+
/**
154+
* How long the toast should stay visible (in ms). Applies to all toasts.
155+
*
156+
* @default 4000
157+
*/
141158
duration?: number;
159+
/** The gap between toasts.
160+
*
161+
* @default 14
162+
*/
142163
gap?: number;
164+
/** The maximum number of toasts that can be visible at once.
165+
*
166+
* @default 3
167+
*/
143168
visibleToasts?: number;
169+
/** Whether to show a close button on the toast. Applies to all toasts.
170+
*
171+
* @default false
172+
*/
144173
closeButton?: boolean;
174+
/** Options for the toast. Applies to all toasts. */
145175
toastOptions?: ToastOptions;
176+
/** Toaster's class name. */
146177
className?: string;
178+
/** Toaster's style. */
147179
style?: React.CSSProperties;
180+
/** Offset from the edge of the screen. Can either be a number or an object with top, right, bottom, and left properties.
181+
*
182+
* @default 24
183+
*/
148184
offset?: Offset;
185+
/** Offset from the edge of the screen on mobile (< 600px). Can either be a number or an object with top, right, bottom, and left properties.
186+
*
187+
* @default 16
188+
*/
149189
mobileOffset?: Offset;
190+
/** Text direction. */
150191
dir?: 'rtl' | 'ltr' | 'auto';
192+
/** The directions in which the toast can be swiped to dismiss. */
151193
swipeDirections?: SwipeDirection[];
152-
/**
153-
* @deprecated Please use the `icons` prop instead:
154-
* ```jsx
155-
* <Toaster
156-
* icons={{ loading: <LoadingIcon /> }}
157-
* />
158-
* ```
159-
*/
160-
loadingIcon?: React.ReactNode;
194+
/** Icons for the toast. */
161195
icons?: ToastIcons;
196+
/** Aria label for the container. */
162197
containerAriaLabel?: string;
163-
pauseWhenPageIsHidden?: boolean;
164198
}
165199

166200
export type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
@@ -188,11 +222,9 @@ export interface ToastProps {
188222
className?: string;
189223
unstyled?: boolean;
190224
descriptionClassName?: string;
191-
loadingIcon?: React.ReactNode;
192225
classNames?: ToastClassnames;
193226
icons?: ToastIcons;
194227
closeButtonAriaLabel?: string;
195-
pauseWhenPageIsHidden: boolean;
196228
defaultRichColors?: boolean;
197229
}
198230

website/src/pages/toaster.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,4 @@ Changes the directionality of the toast's text.
6565
| toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` |
6666
| gap | Gap between toasts when expanded | `14` |
6767
| loadingIcon | Changes the default loading icon | `-` |
68-
| pauseWhenPageIsHidden | Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked. | `false` |
6968
| icons | Changes the default icons | `-` |

0 commit comments

Comments
 (0)