Presence
Helps control the rendering and unmounting of your content based on a given state.
No preview available for presence
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:
Story not foundStory not foundStory not foundUnmount on Exit
To remove the child component from the DOM when it’s not present, use the
unmountOnExit prop:
Story not foundStory not foundStory not foundCombining 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:
Story not foundStory not foundStory not foundAPI Reference
Root
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
lazyMountWhether to enable lazy mounting | boolean | false |
onExitCompleteFunction called when the animation ends in the closed state. | () => void | |
presentWhether the node is present (controlled by the user) | boolean | |
unmountOnExitWhether to unmount on exit. | boolean | false |
Use
| Prop | Type | Default |
|---|---|---|
lazyMountWhether to enable lazy mounting | boolean | false |
onExitCompleteFunction called when the animation ends in the closed state. | () => void | |
presentWhether the node is present (controlled by the user) | boolean | |
unmountOnExitWhether to unmount on exit. | boolean | false |
Previous
PopoverNext
Progress - Circular