@ryvora/react-presence/README.md

🎬 Animate React components in and out with presence detection. Smooth entrances and exits!

# 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

```tsx
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! ✨💨