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 { 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>
</>
)
}
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>
</>
)
}
<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>
Lazy Mount
To delay the mounting of a child component until the present
prop is set to true, use the
lazyMount
prop:
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>
</>
)
}
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>
</>
)
}
<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>
Unmount on Exit
To remove the child component from the DOM when it's not present, use the unmountOnExit
prop:
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>
</>
)
}
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>
</>
)
}
<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>
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:
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>
</>
)
}
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>
</>
)
}
<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>
API Reference
Presence
Prop | Default | Type |
---|---|---|
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
immediate | boolean Whether to synchronize the present change immediately or defer it to the next frame | |
lazyMount | false | boolean Whether to enable lazy mounting |
present | boolean Whether the node is present (controlled by the user) | |
unmountOnExit | false | boolean Whether to unmount on exit. |
Emit | Event |
---|---|
exitComplete | [] Function called when the animation ends in the closed state |