KQ-574 · GRAB/PAN
Grab Pan
A board you grab and throw. The drag is one-to-one with the pointer and follows at a third of the travel past an edge, so the end of the board is felt rather than announced; release hands the offset to a requestAnimationFrame loop that decays the release velocity against elapsed time, and the moment it touches a bound it hands over to glide for the last pixels back. Pointer capture waits for 4px so a click on the board is never swallowed, and every gesture has a keyboard equal: the viewport is focusable, arrows pan a fifth of the view on glide, and Home re-centres.
Drag to pan, or use the arrow keys.
Offset 0 / 0
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/grab-pan
Props
- width / height
- number
- default —
- Board size in px.
- children
- React.ReactNode
- default —
- What sits on the board.
- minimap
- boolean
- default true
- Show the minimap.
- viewportHeight
- number
- default 280
- Height of the viewport the board is seen through, px.
- onOffsetChange
- (offset: { x: number; y: number }) => void
- default —
- Fires with the whole-pixel offset whenever it changes.
- label
- string
- default Board
- Names the pannable region.
- resetLabel
- string
- default Reset
- Label of the re-centre control.
| Prop | Type | Default | Description |
|---|---|---|---|
| width / height | number | — | Board size in px. |
| children | React.ReactNode | — | What sits on the board. |
| minimap | boolean | true | Show the minimap. |
| viewportHeight | number | 280 | Height of the viewport the board is seen through, px. |
| onOffsetChange | (offset: { x: number; y: number }) => void | — | Fires with the whole-pixel offset whenever it changes. |
| label | string | Board | Names the pannable region. |
| resetLabel | string | Reset | Label of the re-centre control. |