Presence

Manages the presence of an element in the DOM while being aware of pending animations before unmounting it. You can see it in action in the Dialog primitive.

The createPresence utility returns a boolean called present which indicates if the element should be present in the DOM or not.

The state variable can be used to get the current state of the presence. Valid states are present, hiding or hidden.

Usage

import { createPresence } from 'corvu'

const DialogContent: Component<{
  open?: boolean
}> = (props) => {
  const [dialogRef, setDialogRef] = createSignal<HTMLElement | null>(null)

  const { present } = createPresence({
    show: () => props.open,
    element: dialogRef,
  })

  return (
    <Show when={present()}>
      <div ref={setDialogRef}>Dialog</div>
    </Show>
  )
}

API reference