@presage-kit/react

React bindings for Presage — adaptive components, hooks, and providers for React 18+.

Install

pnpm add @presage-kit/core @presage-kit/react

Quick Start

1. Wrap your app

import { AdaptiveProvider } from '@presage-kit/react'
import { client } from './adaptive-client'

function App() {
  return (
    <AdaptiveProvider client={client}>
      <Dashboard />
    </AdaptiveProvider>
  )
}

2. Declarative adaptation

import { Adaptive, Variant } from '@presage-kit/react'

function OnboardingBanner() {
  return (
    <Adaptive id="onboarding-banner" defaultVariant="standard">
      <Variant id="standard">
        <Banner>Welcome! Complete your profile to get started.</Banner>
      </Variant>
      <Variant id="checklist">
        <OnboardingChecklist />
      </Variant>
      <Variant id="whats-new">
        <WhatsNewFeed />
      </Variant>
    </Adaptive>
  )
}

3. Type-safe hook

import { useAdaptive } from '@presage-kit/react'

function FeaturePanel() {
  const { selectedVariant, track } = useAdaptive('export-panel', {
    variants: ['simple', 'advanced'] as const,
    defaultVariant: 'simple',
  })
  // selectedVariant: 'simple' | 'advanced' — fully typed

  return (
    <div>
      {selectedVariant === 'advanced' ? <AdvancedExport /> : <SimpleExport />}
      <button onClick={() => track('export_clicked')}>Export</button>
    </div>
  )
}

4. Adaptive ordering (any list)

import { AdaptiveOrder } from '@presage-kit/react'

function FeatureCards() {
  const cards = [
    { id: 'export', title: 'Export' },
    { id: 'import', title: 'Import' },
    { id: 'sync', title: 'Sync' },
  ]

  return (
    <AdaptiveOrder
      id="feature-cards"
      items={cards}
      renderItem={(card) => <Card key={card.id} title={card.title as string} />}
    />
  )
}

5. Adaptive navigation

AdaptiveNav is a thin wrapper around AdaptiveOrder for navigation use cases.

import { AdaptiveNav } from '@presage-kit/react'

<AdaptiveNav
  id="main-nav"
  items={[
    { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
    { id: 'analytics', label: 'Analytics', href: '/analytics' },
  ]}
  renderItem={(item) => <NavLink href={item.href as string}>{item.label as string}</NavLink>}
/>

API

| Export | Description | |--------|-------------| | AdaptiveProvider | Context provider — wraps your app with the client | | Adaptive / Variant | Declarative variant selection based on rules | | AdaptiveOrder | Reorders any list of items based on rules | | AdaptiveNav | Navigation ordering (thin wrapper around AdaptiveOrder) | | useAdaptive | Full adaptation hook with type-safe variants | | useVariant | Lightweight hook — returns just the variant string | | useAdaptiveClient | Direct access to the underlying client |

Docs

presage-kit.dev

License

Proprietary. See LICENSE.