Presence (Animations) 🎬

Hello, Animation Director! 🌟

The presence module, often providing a Presence component, is your key to smoothly animating components when they mount and unmount. It helps manage the lifecycle of an element that needs to animate in and out, especially when its visibility is controlled by a boolean state.

It's like a stage manager for your components, ensuring they make a grand entrance 💃 and a graceful exit 🕺, even if they're removed from the React tree!

The Challenge it Solves

When a component unmounts, React removes it from the DOM immediately. This makes exit animations tricky. Presence keeps the component in the DOM long enough for an exit animation to complete before actually removing it.

How it Typically Works

1. You wrap the component you want to animate with <Presence present={isOpen}>.
2. When isOpen becomes false, Presence doesn't immediately remove its children.
3. Instead, it waits for a CSS animation/transition to finish (or a JS callback) on its child before unmounting it.
4. You use CSS (e.g., data-state="open" or data-state="closed") to define the enter/exit animations.

Conceptual Usage

import { Presence } from '@ryvora/react-presence'; // Or similar name
import React, { useState } from 'react';
import './styles.css'; // Assuming animations are defined here

// styles.css might have:
// .my-animated-box[data-state="open"] { opacity: 1; transform: scale(1); transition: all 0.3s; }
// .my-animated-box[data-state="closed"] { opacity: 0; transform: scale(0.9); transition: all 0.3s; }

function MyAnimatedComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Animation</button>
      <Presence present={isOpen}>
        <div className="my-animated-box" data-state={isOpen ? 'open' : 'closed'}>
          Hello, I animate in and out!
        </div>
      </Presence>
    </>
  );
}

Bring your UI to life with beautiful and smooth presence animations! ✨💨