@fictjs/presence

Presence primitive for Fict, modeled after @radix-ui/react-presence. Keeps an element mounted until its exit animation/transition finishes, enabling enter/exit animations on conditionally-rendered content.

Part of ui-primitives, a port of Radix Primitives to Fict.

Internal building block used by primitives with mount/unmount animations (dialogs, popovers, collapsible content, etc.). Also re-exported from @fictjs/radix-ui/internal.

Installation

pnpm add @fictjs/presence fict

Usage

/** @jsxImportSource fict */
import { Presence } from '@fictjs/presence'

// `present` is an accessor; the child stays mounted through its exit animation.
function Content({ open }: { open: () => boolean }) {
  return (
    <Presence present={() => open()}>
      <div class="content" />
    </Presence>
  )
}

API

• Presence (Root) — present (a boolean or accessor). Renders its child while present and waits for any running CSS animation/transition to complete before unmounting. Also supports a function child that receives { present }.

Exports

• Components: Presence (Root).
• Types: PresenceProps.

Documentation

The API mirrors @radix-ui/react-presence. See the ui-primitives overview and the architecture guide.

License

MIT © Fict contributors.