Compaction & packing

After every move, resize, insert, or remove, the layout is re-packed by a Compactor. Pass one as the compactor option to useGridContainer (or, identically, as a prop on <GridLayout>); swap it any time. It’s just a value.

import { useGridContainer, verticalCompactor, horizontalCompactor, noCompactor } from "@snapgridjs/react";
 
const { containerProps, group } = useGridContainer({ compactor: horizontalCompactor, /* … */ });

Built-in compactors

Exported from @snapgridjs/react (re-exported from the core engine):

These honor static items and per-item collision rules.

Extra packers

@snapgridjs/extras adds variable-height packing styles. They repack the movable items by reading order — the dropped cell influences order while the algorithm decides final positions — and reserve any static tiles in place, packing the rest around them.

import { masonryCompactor, gravityCompactor, shelfCompactor } from "@snapgridjs/extras";

Fast compactors

@snapgridjs/extras also re-exports react-grid-layout’s O(n log n) vertical and horizontal compactors: drop-in replacements for the built-in cascades that produce the same packing on clean (non-overlapping) layouts but pack far faster at scale.

import { fastVerticalCompactor, fastHorizontalCompactor } from "@snapgridjs/extras";
 
const { containerProps, group } = useGridContainer({ compactor: fastVerticalCompactor, /* … */ });

They only help with bulk compaction: building a large layout from scratch, a responsive reflow, or compacting imported data. Dragging is already cheap (each move re-packs an already-tidy layout), so the fast variants don’t change how a drag feels; reach for them when you pack hundreds to thousands of items at once.

Each also has an …OverlapCompactor variant (fastVerticalOverlapCompactor, fastHorizontalOverlapCompactor, wrapOverlapCompactor) that permits overlapping items rather than cascading them apart.

react-grid-layout’s published benchmarks, the standard O(n²) cascade vs. the fast O(n log n) “rising tide”:

Writing a custom compactor

A Compactor is a small object. Implement compact(layout, cols) and return the packed layout:

import type { Compactor, Layout } from "@snapgridjs/react";
 
const diagonalCompactor: Compactor = {
  type: null, // null = free-positioning from the engine's perspective
  allowOverlap: false,
  compact(layout: Layout, cols: number): Layout {
    return [...layout]
      .sort((a, b) => a.y - b.y || a.x - b.x)
      .map((item, idx) => ({ ...item, x: Math.min(idx, cols - item.w), y: idx }));
  },
};