# 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**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

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

```

#### Vue

```vue
<script setup lang="ts">
import { Presence } from '@ark-ui/vue/presence'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

const isPresent = ref(false)
</script>

<template>
  <div class="stack">
    <button :class="button.Root" @click="isPresent = !isPresent">Toggle</button>
    <Presence :class="styles.Box" :present="isPresent">Content</Presence>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Presence, type PresenceProps } from '@ark-ui/svelte/presence'
  import button from 'styles/button.module.css'
  import styles from 'styles/presence.module.css'

  const props: PresenceProps = $props()
  let present = $state(false)

  function toggle() {
    present = !present
  }
</script>

<div class="stack">
  <button class={button.Root} onclick={toggle}>Toggle</button>
  <Presence {...props} 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**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

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

```

#### Vue

```vue
<script setup lang="ts">
import { Presence } from '@ark-ui/vue/presence'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

const isPresent = ref(false)
</script>

<template>
  <div class="stack">
    <button :class="button.Root" @click="isPresent = !isPresent">Toggle</button>
    <Presence :class="styles.Box" :present="isPresent" lazyMount>Lazy Mounted</Presence>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Presence, type PresenceProps } from '@ark-ui/svelte/presence'
  import button from 'styles/button.module.css'
  import styles from 'styles/presence.module.css'

  const props: PresenceProps = $props()
  let present = $state(false)

  function toggle() {
    present = !present
  }
</script>

<div class="stack">
  <button class={button.Root} onclick={toggle}>Toggle</button>
  <Presence {...props} 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**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

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

```

#### Vue

```vue
<script setup lang="ts">
import { Presence } from '@ark-ui/vue/presence'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

const isPresent = ref(false)
</script>

<template>
  <div class="stack">
    <button :class="button.Root" @click="isPresent = !isPresent">Toggle</button>
    <Presence :class="styles.Box" :present="isPresent" unmountOnExit>Unmount on Exit</Presence>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Presence, type PresenceProps } from '@ark-ui/svelte/presence'
  import button from 'styles/button.module.css'
  import styles from 'styles/presence.module.css'

  const props: PresenceProps = $props()
  let present = $state(false)

  function toggle() {
    present = !present
  }
</script>

<div class="stack">
  <button class={button.Root} onclick={toggle}>Toggle</button>
  <Presence {...props} 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**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

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

```

#### Vue

```vue
<script setup lang="ts">
import { Presence } from '@ark-ui/vue/presence'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/presence.module.css'

const isPresent = ref(false)
</script>

<template>
  <div class="stack">
    <button :class="button.Root" @click="isPresent = !isPresent">Toggle</button>
    <Presence :class="styles.Box" :present="isPresent" lazyMount unmountOnExit>Lazy + Unmount</Presence>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Presence, type PresenceProps } from '@ark-ui/svelte/presence'
  import button from 'styles/button.module.css'
  import styles from 'styles/presence.module.css'

  const props: PresenceProps = $props()
  let present = $state(false)

  function toggle() {
    present = !present
  }
</script>

<div class="stack">
  <button class={button.Root} onclick={toggle}>Toggle</button>
  <Presence {...props} class={styles.Box} lazyMount unmountOnExit {present}>Lazy + Unmount</Presence>
</div>

```

## API Reference

**Component API Reference**

#### React

**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. |


#### Solid

**Presence Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | 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. |


#### Vue

**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 |
| `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. |


#### Svelte

**Presence Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | 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) |
| `ref` | `Element` | No |  |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |