🛝 Playground

Autohide time

Type

Position

Display order

Theme

In animation

Out animation

In body animation

Toast adding

1const config: Partial<ReactToastConfig> = {
2  position: "bottom-right",
3  type: "base",
4  title: "base",
5  order: "normal",
6  inAnimation: slideVerticallyIn,
7  outAnimation: slideVerticallyOut,
8  inBodyAnimation: slideHorizontalWithFadeInBody,
9  autoHide: 7000,
10  theme: "",
11  hideOnClick: true,
12  showProgress: true,
13  showIcon: true,
14  showHideButton: true,
15  animateBody: true,
16  rtl: false,
17  pauseOnHover: true,
18  dragOnMobile: true,
19};
20add(config);

Toaster

1<Toaster
2  position={"bottom-right"}
3  type={"base"}
4  title={"base"}
5  order={"normal"}
6  inAnimation={slideVerticallyIn}
7  outAnimation={slideVerticallyOut}
8  inBodyAnimation={slideHorizontalWithFadeInBody}
9  autoHide={7000}
10  theme={""}
11  hideOnClick
12  showProgress
13  showIcon
14  showHideButton
15  animateBody
16  rtl={false}
17  pauseOnHover
18  dragOnMobile
19  visibleToasts={5}
20/>

🎉 Features

easy to use
easy to customize
beautiful by default
smooth animations
ability to override the id
optional title
6 available positions on the screen
normal or reversed display order
5 available types: base, info, success, warning, error
3 themes: light, dark and colorful
8 built-in enter animations
8 built-in exit animations
3 built-in optional body animations
ability to create custom animation with ease
limit the number of toasts visible on the screen at once
right-to-left support
custom styling
optional ability to drag on mobile
5 available callbacks