peekx

Peek is an inline progressive disclosure component for React. Annotate words or phrases with pre-written context — readers click to expand, content streams in at reading speed. Write once, readable by every audience.

Live demo →

Install

npm install peekx
# pnpm add peekx
# bun add peekx
# yarn add peekx

Usage

Works in .tsx, .jsx, and .mdx files.

import { Peek } from 'peekx'

// Basic
The model uses <Peek trigger="RLHF">Reinforcement Learning from Human Feedback —
someone paid $3/hr to vote yes or no on a response</Peek> to steer outputs.

// Nested
We use <Peek trigger="agents">autonomous programs that plan and execute tasks using
an <Peek trigger="LLM">Large Language Model — predicts the next token given everything
it has seen so far</Peek> as their reasoning engine</Peek>.

// Rich trigger
<Peek trigger={<code>temperature</code>}>a sampling parameter between 0 and 2 —
higher values make outputs more random, lower values more deterministic</Peek>

Configuration

peekConfig lets you theme the component once for your whole project. Set it at your app root — applies everywhere:

import { peekConfig } from 'peekx'

peekConfig.wordsPerMinute = 400       // default: 300
peekConfig.triggerStyle = { borderBottom: '1px solid' }
peekConfig.colors = [
  { text: '#f97316', glow: '0 0 12px #f9731650' },
  { text: '#ec4899', glow: '0 0 12px #ec489950' },
  { text: '#14b8a6', glow: '0 0 12px #14b8a650' },
]

triggerStyle accepts any CSS properties except color and borderBottomColor — those always track the depth color automatically.

Known limitation — peekConfig is a module-level singleton. If two packages in the same project both import and configure Peek, their configs will collide. Open to suggestions on this.

Props

| Prop | Type | Description | |---|---|---| | trigger | ReactNode | The clickable word or phrase shown inline | | children | ReactNode | The content that expands — supports nested Peeks | | onOpen | () => void | Called when the Peek expands | | onClose | () => void | Called when the Peek collapses |

onOpen and onClose exist for extensibility — analytics being the obvious use case. Every expansion is a signal: your reader didn't know that word.

Requirements

• React 18+ — no dependencies, pure React
• JSX — works in .tsx, .jsx, and .mdx files. Plain .md won't work
• Vue/Svelte — ports are trivial but don't exist yet

Notes

• Nesting is unlimited — colors cycle blue → violet → emerald → repeat
• Keyboard accessible: Enter/Space toggle, Escape closes (WCAG button spec)
• No dependencies beyond React
• Add 'use client' at the top of your file if using Next.js App Router
• One React re-render per character tick. Negligible on any modern device

License

MIT