Compaction & packing

After every move, resize, insert, or remove, the layout is re-packed by a Compactor. Pass one to the compactor prop; swap it any time. It’s just a value.

import { GridLayout, verticalCompactor, horizontalCompactor, noCompactor } from "@snapgridjs/react";
 
<GridLayout 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 all items by reading order, so the dropped cell influences order while the algorithm decides final positions.

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";
 
<GridLayout 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.

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 }));
  },
};