<!-- Source: https://motion.svelte.page/docs/use-presence-data -->

# usePresenceData

> Read AnimatePresence custom data from an exiting child.

**Source:** [https://motion.svelte.page/docs/use-presence-data](https://motion.svelte.page/docs/use-presence-data)

---

`usePresenceData()` returns the nearest `<AnimatePresence custom={...}>`
value. It matches Motion's hook shape: inside a presence boundary it returns
that boundary's `custom` data, and outside a boundary it returns `undefined`.

The main use case is keyed exit animation. Once a child has been removed from
state, its normal props are stale. Presence data gives that exiting child the
latest parent-level data, such as a carousel direction.

```svelte
<script lang="ts">
    import { AnimatePresence, motion, usePresenceData, wrap } from '@humanspeak/svelte-motion'

    const items = [1, 2, 3]
    let selected = $state(items[0])
    let direction = $state(1)

    function paginate(nextDirection: 1 | -1) {
        selected = wrap(1, items.length, selected + nextDirection)
        direction = nextDirection
    }
</script>

<AnimatePresence custom={direction} initial={false} mode="popLayout">
    {#key selected}
        <Slide key={selected} />
    {/key}
</AnimatePresence>
```

Inside the keyed child:

```svelte
<script lang="ts">
    import { motion, usePresenceData, type Variants } from '@humanspeak/svelte-motion'

    const direction = $derived(usePresenceData<1 | -1>() ?? 1)

    const variants: Variants = {
        enter: (custom) => ({ x: custom > 0 ? 50 : -50, opacity: 0 }),
        center: { x: 0, opacity: 1 },
        exit: (custom) => ({ x: custom > 0 ? -50 : 50, opacity: 0 })
    }
</script>

<motion.div
    custom={direction}
    {variants}
    initial="enter"
    animate="center"
    exit="exit"
/>
```

> Live example: [/examples/use-presence-data](https://motion.svelte.page/examples/use-presence-data)

## API Reference

### `usePresenceData<T = unknown>(): T | undefined`

Returns the current `custom` value from the nearest `<AnimatePresence>`
boundary.

- Inside `<AnimatePresence custom={value}>`, returns `value`.
- Outside `<AnimatePresence>`, returns `undefined`.
- In Svelte reactive contexts, wrap it in `$derived(...)` so updates to
  `custom` are tracked.

## Related

- [AnimatePresence custom](/docs/animate-presence-custom) — dynamic exit
  variants using parent custom data.
- [usePresence](/docs/use-presence) — manually delay removal with
  `safeToRemove`.

Based on [Motion's usePresenceData API](https://motion.dev/docs/react-use-presence-data).
