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.

import { useState } from 'react'
import { Presence } from '@ark-ui/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>
    </>
  )
}

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

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

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

const isPresent = ref(false)
</script>

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

Lazy Mount

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

Example not found

Example not found

Example not found

Unmount on Exit

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

Example not found

Example not found

Example not found

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 not found

Example not found

Example not found

API Reference

Root

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`onExitComplete`		`() => void` Function called when the animation ends in the closed state.
`present`		`boolean` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.

Use

Prop	Default	Type
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`onExitComplete`		`() => void` Function called when the animation ends in the closed state.
`present`		`boolean` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.