Presence

A utility component for managing mount and unmount animations.

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

const isPresent = ref(false)
</script>

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

import type { PresenceProps } from '@destyler-ui/react'
import { useState } from 'react'
import { Presence } from '@destyler-ui/react'

export function Basic(props: PresenceProps) {
  const [present, setPresent] = useState(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence present={present} {...props} data-testid="box">
        I am a red box
      </Presence>
    </>
  )
}

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

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

<script module lang="ts">
  import type { PresenceProps } from '@destyler-ui/svelte'

  export interface BasicProps extends Omit<PresenceProps, 'children' | 'present'> {}
</script>

<script lang="ts">
  import { Presence } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
  let present = $state(false)
</script>

<button type="button" onclick={() => present = !present}>Toggle</button>
<Presence {present} {...props} data-testid="box">I am a red box</Presence>

Anatomy

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

<template>
  <Presence :present="isOpen" :lazy-mount="true" :unmount-on-exit="true">
    <div>Content</div>
  </Presence>
</template>

import { Presence } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Presence present={isOpen} lazyMount unmountOnExit>
      <div>Content</div>
    </Presence>
  )
}

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

export default function Basic() {
  const [isOpen, setIsOpen] = createSignal(false)

  return (
    <>
      <button type="button" onClick={() => setIsOpen(open => !open)}>Toggle</button>
      <Presence present={isOpen()} lazyMount unmountOnExit>
        <div>Content</div>
      </Presence>
    </>
  )
}

<script module lang="ts">
  import type { PresenceProps } from '@destyler-ui/svelte'

  export interface BasicProps extends Omit<PresenceProps, 'children' | 'present'> {}
</script>

<script lang="ts">
  import { Presence } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
  let present = $state(false)
</script>

<button type="button" onclick={() => present = !present}>Toggle</button>
<Presence {present} {...props} data-testid="box">I am a red box</Presence>

Examples

Basic

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

const isPresent = ref(false)
</script>

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

import type { PresenceProps } from '@destyler-ui/react'
import { useState } from 'react'
import { Presence } from '@destyler-ui/react'

export function Basic(props: PresenceProps) {
  const [present, setPresent] = useState(false)
  return (
    <>
      <button type="button" onClick={() => setPresent(!present)}>
        Toggle
      </button>
      <Presence present={present} {...props} data-testid="box">
        I am a red box
      </Presence>
    </>
  )
}

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

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

<script module lang="ts">
  import type { PresenceProps } from '@destyler-ui/svelte'

  export interface BasicProps extends Omit<PresenceProps, 'children' | 'present'> {}
</script>

<script lang="ts">
  import { Presence } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
  let present = $state(false)
</script>

<button type="button" onclick={() => present = !present}>Toggle</button>
<Presence {present} {...props} data-testid="box">I am a red box</Presence>

Lazy Mount

Mount the content lazily when first presented.

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

const isPresent = ref(false)
</script>

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

import { useState } from 'react'
import { Presence } from '@destyler-ui/react'

export function 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 '@destyler-ui/solid/presence'
import { createSignal } from 'solid-js'

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

<script lang="ts">
  import { Presence } from '@destyler-ui/svelte'

  let present = $state(false)
</script>

<button type="button" onclick={() => present = !present}>Toggle</button>
<Presence {present} lazyMount data-testid="box">Unmounted and Hidden</Presence>

Unmount On Exit

Unmount the content when it is no longer present.

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

const isPresent = ref(false)
</script>

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

import { useState } from 'react'
import { Presence } from '@destyler-ui/react'

export function 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 '@destyler-ui/solid/presence'
import { createSignal } from 'solid-js'

export function 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 lang="ts">
  import { Presence } from '@destyler-ui/svelte'

  let present = $state(false)
</script>

<button type="button" onclick={() => present = !present}>Toggle</button>
<Presence {present} unmountOnExit data-testid="box">Hidden and Unmounted on Exit</Presence>

Lazy Mount And Unmount On Exit

Combine lazy mounting with unmount on exit.

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

const isPresent = ref(false)
</script>

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

import { useState } from 'react'
import { Presence } from '@destyler-ui/react'

export function 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 '@destyler-ui/solid/presence'
import { createSignal } from 'solid-js'

export function 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 lang="ts">
  import { Presence } from '@destyler-ui/svelte'

  let present = $state(false)
</script>

<button type="button" onclick={() => present = !present}>Toggle</button>
<Presence {present} lazyMount unmountOnExit data-testid="box">Lazy Mount and Unmounted on Exit</Presence>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Emit	Event
`exitComplete`	`[]` Function called when the animation ends in the closed state

Provider

No serializable props or emits are declared for this part.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Provider

No serializable props or emits are declared for this part.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js351.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => solid_js351.JSX.HTMLAttributes<any>) => solid_js351.JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Provider

No serializable props or emits are declared for this part.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`false \| true` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Provider

No serializable props or emits are declared for this part.