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

  if (!popup.isRendered) return null;

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