Skip to content
kerfjsGitHub

Presence

Shows and hides its content with an entrance and an exit, so nothing on the page appears or vanishes in a cut.

SourcePackage @kerf-js/veneer

Preview

tsx
import { state } from '@kerf-js/core'import {  Button,  Presence,  Stack,  Text} from '@kerf-js/veneer'export function Toggle() {  const open = state(true)  return (    <Stack>      <Button onClick={() => (open.value = !open.value)}>        {open.value ? 'Hide details' : 'Show details'}      </Button>      <Presence when={open.value}>        <Text>Deploys roll out region by region.</Text>        <Text>A failed health check rolls back.</Text>      </Presence>    </Stack>  )}

Installation

npm install @kerf-js/veneer

Usage

tsx
import { Presence } from '@kerf-js/veneer'

Rise

motion keeps the size and arrives by fade, rise, pop or slide-up, slide-down, slide-left, slide-right; the exit runs back the way it came, faster. No component: data-presence="rise" and hidden. For an overlay of your own, put the exit on [data-state="closed"] and close it with leave(el, done) from @kerf-js/veneer-core/motion.

tsx
import { state } from '@kerf-js/core'import {  Button,  Presence,  Stack,  Text} from '@kerf-js/veneer'export function Rise() {  const saved = state(false)  return (    <Stack>      <Button        onClick={() => (saved.value = !saved.value)}      >        {saved.value ? 'Undo' : 'Save'}      </Button>      <Presence        when={saved.value}        motion="rise"      >        <Text>Saved a moment ago.</Text>      </Presence>    </Stack>  )}

When to use

Use it for

  • A block of the page that comes and goes: details, a note, an extra field
  • Your own component that opens and closes and should move like Veneer's do

Reach for something else

  • Accordion, when there is a heading to press for each section
  • Modal, when it should sit over the page and take focus
  • Popover, when it belongs to one control and floats beside it

Accessibility

  • Hidden content is hidden: out of the tab order and the accessibility tree once its exit ends.
  • Under reduced motion it fades, with no travel or growth.

API Reference

PropTypeDefaultDescription
whenboolean—Shown while true. Its content stays mounted while hidden, so what it holds survives a close.
motionPresenceMotion'collapse'collapse (default), fade, rise, pop, slide-up, slide-down, slide-left or slide-right.
childrenunknown—What it contains.

RelatedAccordionModalPopover