Ecosystem

Reusable component behavior

Small behaviors that share the Ajo component lifecycle.

An ordinary function

A clove takes the host and returns a stable live view of one concern. It uses host.next() to update and host.signal to clean up. There is no ordering rule or separate lifecycle registry.

Terminal

pnpm add ajo-cloves@0.1.2

Cloves include controlled state, dismissal, roving keyboard focus, timers, media queries and observers. DOM work stays inert during SSR. A disclosure can reuse state behavior while keeping its own markup.

Disclosure.tsx

import type { Stateful } from 'ajo'
import { controlled } from 'ajo-cloves'

const Disclosure: Stateful = function* () {
  const open = controlled(this, { fallback: false })
  while (true) yield (
    <>
      <button
        aria-expanded={open.value ? 'true' : 'false'}
        set:onclick={() => open.set(!open.value)}
      >Details</button>
      {open.value && <p>A little more context.</p>}
    </>
  )
}

Choose the right level

Use cloves for custom reusable behavior. Use ajo-ui for complete unstyled component families, or Playa when you also want a theme.

Keep exploringFull reference on GitHub All guides

An ordinary function

Compose only what you need

Choose the right level