React-auto-columns NPM

📊 React Auto Columns

A React component that automatically arranges child elements into columns based on the available screen space, similar to the Discord GIF browser. This package is great for creating product listings, galleries, and more.

🚀 Demo

You can see the package in action on the demo website.

⚙️ Installation

npm install react-auto-columns

Or if you're using pnpm:

pnpm add react-auto-columns

🚀 Usage Example

import { Columns } from "react-auto-columns";

<Columns
  className="flex gap-4"
  columnClassName="flex flex-col gap-4 flex-1"
  columns={{ 1024: 2, 1280: 3 }}
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</Columns>

While the default value for the columns prop is 3, if no breakpoints match it will automatically use 1 column.

If you want to override this behavior, you can pass an object with a 0 key like this:

<Columns columns={{ 0:3, ... }}>
  ...
</Columns>

Props 🎛

Prop name	Type	Default value	Description
`columns`	`number \\| { [key: number]: number }`	`3`	A fixed amount of columns or an object mapping breakpoints to column counts.
`columnClassName`	`string`	`""`	Class name to apply to each column.