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.

Installation Section titled Installation

npm install solid-presence

Usage Section titled Usage

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.

import createPresence from 'solid-presence'

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 Section titled API reference