Headless React utilities for positioning stacked UI elements next to their anchor points — perfect for inline comments, review threads, and annotations.
npm install anchor-stackHeadless React utilities for positioning stacked UI elements next to their anchor points — perfect for inline comments, review threads, and annotations.
- Anchor-aware stacking with collision detection
- Selected items stay on their anchors while neighbors reflow
- Pure positioning function for unit testing
- Demo page with text selection + comment creation
``bash`
bun add anchor-stack
`tsx
import { useAnchorStack } from 'anchor-stack'
import type { AnchorStackItem } from 'anchor-stack'
const items: AnchorStackItem<{ text: string }>[] = [
{ id: 'comment-1', data: { text: 'Hello' } },
{ id: 'comment-2', data: { text: 'World' } },
]
function Comments() {
const { positions, refs, sortedItems } = useAnchorStack({
items,
selectedId: null,
gap: 12,
anchorResolver: (item) => document.querySelector([data-anchor="${item.id}"]),
})
return (
API
-
→ { positions, refs, sortedItems }
-
- and useAnchorStackContext for context-based usage
- useRefs() for dynamic, stable ref generationDemo
Live demo: https://.github.io/anchor-stack/
To build the demo locally:
`bash
bun run build:demo
`Then open