DEV Community

Cover image for Make a toast notification with use-animation-presence
Kirill Vasiltsov
Kirill Vasiltsov

Posted on


Make a toast notification with use-animation-presence

Last time I wrote about the advantages of using a library to animate mounts and unmounts of your React components.

Here's one thing you can very easily to with this lib: toast notifications.


Play with the live recipe here:

Toast code

const Toast = () => {
  const popup = useAnimatePresence({
    variants: popupVariants,
    initial: "visible",
    options: {
      stiffness: 200,
      mass: 3,
      damping: 30

  React.useEffect(() => {
    setTimeout(() => {
    }, 2000);
  }, []);

  if (!popup.isRendered) return null;

  return (
    <div ref={popup.ref}>
      Very important notification!
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.