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

export const Basic = () => {
  const [present, setPresent] = useState(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence present={present}>Hidden and Hidden</Presence>
    </>
  )
}

```

#### Solid

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'

export const Basic = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present())}>
        Toggle
      </button>
      <Presence present={present()}>Hidden and Hidden</Presence>
    </>
  )
}

```

#### Vue

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

const isPresent = ref(false)
</script>

<template>
  <div>
    <button @click="isPresent = !isPresent">Toggle</button>
    <Presence :present="isPresent">Hidden and Hidden</Presence>
  </div>
</template>

```

#### Svelte

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

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

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

<button onclick={toggle}>Toggle</button>

<Presence {...props} {present}>Content</Presence>

```

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

export const LazyMount = () => {
  const [present, setPresent] = useState(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence present={present} lazyMount>
        Unmounted and Hidden
      </Presence>
    </>
  )
}

```

#### Solid

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'

export const LazyMount = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present())}>
        Toggle
      </button>
      <Presence present={present()} lazyMount>
        Unmounted and Hidden
      </Presence>
    </>
  )
}

```

#### Vue

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

const isPresent = ref(false)
</script>

<template>
  <div>
    <button @click="isPresent = !isPresent">Toggle</button>
    <Presence :present="isPresent" lazyMount>Hidden and Hidden</Presence>
  </div>
</template>

```

#### Svelte

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

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

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

<button onclick={toggle}>Toggle</button>

<Presence {...props} lazyMount {present}>Content</Presence>

```

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

export const UnmountOnExit = () => {
  const [present, setPresent] = useState(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence present={present} unmountOnExit>
        Hidden and Unmounted on Exit
      </Presence>
    </>
  )
}

```

#### Solid

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'

export const UnmountOnExit = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present())}>
        Toggle
      </button>
      <Presence present={present()} unmountOnExit>
        Hidden and Unmounted on Exit
      </Presence>
    </>
  )
}

```

#### Vue

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

const isPresent = ref(false)
</script>

<template>
  <div>
    <button @click="isPresent = !isPresent">Toggle</button>
    <Presence :present="isPresent" unmountOnExit>Hidden and Unmounted on Exit</Presence>
  </div>
</template>

```

#### Svelte

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

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

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

<button onclick={toggle}>Toggle</button>

<Presence {...props} unmountOnExit {present}>Content</Presence>

```

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

export const LazyMountAndUnmountOnExit = () => {
  const [present, setPresent] = useState(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence present={present} lazyMount unmountOnExit>
        Lazy Mount and Unmounted on Exit
      </Presence>
    </>
  )
}

```

#### Solid

```tsx
import { Presence } from '@ark-ui/solid/presence'
import { createSignal } from 'solid-js'

export const LazyMountAndUnmountOnExit = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present())}>
        Toggle
      </button>
      <Presence present={present()} lazyMount unmountOnExit>
        Lazy Mount and Unmounted on Exit
      </Presence>
    </>
  )
}

```

#### Vue

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

const isPresent = ref(false)
</script>

<template>
  <div>
    <button @click="isPresent = !isPresent">Toggle</button>
    <Presence :present="isPresent" lazyMount unmountOnExit>Lazy Mount and Unmounted on Exit</Presence>
  </div>
</template>

```

#### Svelte

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

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

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

<button onclick={toggle}>Toggle</button>

<Presence {...props} lazyMount unmountOnExit {present}>Content</Presence>

```

## API Reference

**Component API Reference**

#### React

**Presence Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `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) |


#### 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 |
|------|------|----------|-------------|
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `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) |


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