# Presence

URL: https://ark-ui.com/docs/utilities/presence
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/presence.mdx

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.

**Example: basic**

```ripple
import { track } from 'ripple';
import { Presence } from 'ark-ripple/presence';
import button from 'styles/button.module.css';
import styles from 'styles/presence.module.css';

export component Basic() {
  let present = track(false);

  <div class="stack">
    <button
      class={button.Root}
      onClick={() => {
        @present = !@present;
      }}
    >
      {'Toggle'}
    </button>
    <Presence class={styles.Box} {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:

**Example: lazy-mount**

```ripple
import { track } from 'ripple';
import { Presence } from 'ark-ripple/presence';
import button from 'styles/button.module.css';
import styles from 'styles/presence.module.css';

export component LazyMount() {
  let present = track(false);

  <div class="stack">
    <button
      class={button.Root}
      onClick={() => {
        @present = !@present;
      }}
    >
      {'Toggle'}
    </button>
    <Presence class={styles.Box} lazyMount {present}>{'Lazy Mounted'}</Presence>
  </div>
}

```

### Unmount on Exit

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

**Example: unmount-on-exit**

```ripple
import { track } from 'ripple';
import { Presence } from 'ark-ripple/presence';
import button from 'styles/button.module.css';
import styles from 'styles/presence.module.css';

export component UnmountOnExit() {
  let present = track(false);

  <div class="stack">
    <button
      class={button.Root}
      onClick={() => {
        @present = !@present;
      }}
    >
      {'Toggle'}
    </button>
    <Presence class={styles.Box} unmountOnExit {present}>{'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:

**Example: lazy-mount-and-unmount-on-exit**

```ripple
import { track } from 'ripple';
import { Presence } from 'ark-ripple/presence';
import button from 'styles/button.module.css';
import styles from 'styles/presence.module.css';

export component LazyMountAndUnmountOnExit() {
  let present = track(false);

  <div class="stack">
    <button
      class={button.Root}
      onClick={() => {
        @present = !@present;
      }}
    >
      {'Toggle'}
    </button>
    <Presence class={styles.Box} lazyMount unmountOnExit {present}>{'Lazy + Unmount'}</Presence>
  </div>
}

```

## API Reference

**Component API Reference**

**Presence Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
