API Overview
A map of the public surface. Follow a link for details.
@snapgridjs/react
The main package. Components, hooks, and a re-export of the engine types.
Components
| Export | Purpose |
|---|---|
GridLayout | Drop-in controlled grid with keyed children. |
ResponsiveGridLayout | Per-breakpoint layouts. |
GridItem | A positioned tile with default markup + handles. |
GridPlaceholder | Default landing-cell marker. |
GridDragOverlay | Floating drag preview (body portal). |
SnapGridProvider | Headless provider — owns the session. |
SnapGridGroup | Wraps grids for cross-grid dragging. |
Hooks
| Export | Returns |
|---|---|
useContainerWidth | { width, mounted, containerRef } |
useGridContainer | { containerProps, isDropTarget } |
useGridItem | { ref, style, isDragging, item } |
useGridResizeHandle | { ref, handleProps, isResizing } |
useGridPlaceholder | { item, style } | null |
useGridDragOverlay | { item, style } | null |
useResponsiveLayout | { breakpoint, cols, layout, onLayoutChange } |
Utilities & compactors
DEFAULT_BREAKPOINTS, DEFAULT_BREAKPOINT_COLS, and the built-in compactors
verticalCompactor, horizontalCompactor, noCompactor, getCompactor.
Types & config
Layout, LayoutItem, GridConfig, DragConfig, ResizeConfig, DropConfig, GridDropData,
GridEventCallback, Compactor, CompactType, Breakpoints, BreakpointCols,
ResponsiveLayouts, PositionParams, ResizeHandleAxis. See Types & config.
@snapgridjs/core
The framework-agnostic engine: geometry, move/resize/insert/remove operations, and the drag session state machine. Most apps never import it directly. See Core engine & extras.
@snapgridjs/extras
Optional packers: masonryCompactor, gravityCompactor, shelfCompactor, plus wrapCompactor
and the fast O(n log n) compactors re-exported from react-grid-layout. See
Core engine & extras.