loading...
Cover image for Make a toast notification with use-animation-presence

Make a toast notification with use-animation-presence

virtualkirill profile image Kirill Vasiltsov ・1 min read

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.

toast

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(() => {
      popup.togglePresence();
    }, 2000);
  }, []);

  if (!popup.isRendered) return null;

  return (
    <div ref={popup.ref}>
      Very important notification!
    </div>
  );
};

Posted on by:

virtualkirill profile

Kirill Vasiltsov

@virtualkirill

I am interested in everything that is related to UI. I'm also learning about low-level stuff and experimenting with Rust.

Discussion

pic
Editor guide