# Presence

URL: https://ark-ui.com/docs/utilities/presence
LLM: https://ark-ui.com/llms.txt/utilities/presence

Helps control the rendering and unmounting of your content based on a given state.

---

## Examples

By default the child component starts out as hidden and remains hidden after the `present` state is toggled off. This is
useful for situations where the element needs to be hidden initially and continue to stay hidden after its presence is
no longer required.

```tsx
import { Presence } from '@ark-ui/react/presence'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

export const Basic = () => {
  const [present, setPresent] = useState(false)
  return (
    <div className="stack">
      <button className={button.Root} type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence className={styles.Box} present={present}>
        Content
      </Presence>
    </div>
  )
}
```

### Lazy Mount

To delay the mounting of a child component until the `present` prop is set to true, use the `lazyMount` prop:

```tsx
import { Presence } from '@ark-ui/react/presence'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

export const LazyMount = () => {
  const [present, setPresent] = useState(false)
  return (
    <div className="stack">
      <button className={button.Root} type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence className={styles.Box} present={present} lazyMount>
        Lazy Mounted
      </Presence>
    </div>
  )
}
```

### Unmount on Exit

To remove the child component from the DOM when it's not present, use the `unmountOnExit` prop:

```tsx
import { Presence } from '@ark-ui/react/presence'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

export const UnmountOnExit = () => {
  const [present, setPresent] = useState(false)
  return (
    <div className="stack">
      <button className={button.Root} type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence className={styles.Box} present={present} unmountOnExit>
        Unmount on Exit
      </Presence>
    </div>
  )
}
```

### Combining Lazy Mount and Unmount on Exit

Both `lazyMount` and `unmountOnExit` can be combined for a component to be mounted only when it's present and to be
unmounted when it's no longer present:

```tsx
import { Presence } from '@ark-ui/react/presence'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

export const LazyMountAndUnmountOnExit = () => {
  const [present, setPresent] = useState(false)
  return (
    <div className="stack">
      <button className={button.Root} type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence className={styles.Box} present={present} lazyMount unmountOnExit>
        Lazy + Unmount
      </Presence>
    </div>
  )
}
```

## API Reference

### Presence

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.