@snapgridjs/dnd
v0.7.0
Published
Framework-agnostic dnd-kit grid engine for snapgrid — the shared drag/resize/cross-grid brain consumed by @snapgridjs/react (and future Vue/Solid bindings).
Downloads
691
Maintainers
Readme
@snapgridjs/dnd
The framework-agnostic dnd-kit engine for snapgrid — the drag, resize, and cross-grid orchestration that @snapgridjs/react is built on, with no React (or any framework) dependency.
Most users want
@snapgridjs/react, not this package.@snapgridjs/dndis the shared engine the framework bindings compose. Reach for it directly only to build a binding for another framework (Vue, Solid, Svelte, vanilla) on top of the same engine.
Install
pnpm add @snapgridjs/dnd @dnd-kit/dom@dnd-kit/dom, @dnd-kit/abstract, and @dnd-kit/collision are peer dependencies (so there's a single shared copy); @snapgridjs/core comes in automatically.
What's here
One per-manager engine, plus the pieces a binding wires up:
attachEngine(manager)— attach the drag/resize/receive engine to a dnd-kit manager (ref-counted; one per manager). It listens to the manager's drag lifecycle and drives every registered grid — including cross-grid hand-off.GridController— the observable per-grid render bridge. A binding writes per-grid config into it and subscribes to the rendered layout / per-tile snapshots (e.g. viauseSyncExternalStore).registerController/getController— resolve a grid's controller by id, scoped to a manager.- Interaction helpers —
gridCollisionDetector,SnapToGrid,buildItemSensors,domElement, and the puredragFlowdecision functions (classifyDrop,receiveCell, …). snapMove(layout, event, ctx)— the consumer-facing reducer for dnd-kit ecosystem interop (drag auseSortablecard into a grid, or a tile between a grid and a sortable list); also re-exported from@snapgridjs/react.- Config & event types —
DragConfig,ResizeConfig,DropConfig,GridDropData,GridEventCallback(also re-exported from@snapgridjs/react).
The layout math — compaction, geometry, move/resize, and the drag-session state machine — lives in @snapgridjs/core; this package adds the dnd-kit interaction layer on top, and the framework bindings add rendering.
Stability
The binding-author surface is still settling as the first non-React bindings are built — treat these exports as semi-stable.
License
MIT
