@crob/react-stack-grid v1.0.2

React Stack Grid

A responsive and dynamic stack grid component for React, designed to make it easy and efficient to create dynamic, responsive grid layouts. It automatically arranges items based on the available container width, ensuring a visually appealing presentation on all devices.

Demo

See the demo for a live example of StackGrid in action.

Features

• Responsive: Automatically adjusts to the container's width
• Customizable: Offers props for minimum column width, gutter width, and gutter height
• Type-Safe: Built with TypeScript for better development experience
• Performance Optimized: Efficient reflow and resize handling

Installation

npm install @crob/react-stack-grid
# or
yarn add @crob/react-stack-grid

Usage

Basic Usage

import { StackGrid } from '@crob/react-stack-grid';

interface Item {
  id: number;
  content: string;
  height: number;
}

const YourComponent = () => {
  const items: Item[] = [
    { id: 1, content: 'Item 1', height: 100 },
    { id: 2, content: 'Item 2', height: 150 },
    // ... more items
  ];

  return (
    <StackGrid
      items={items}
      columnMinWidth={200}
      gutterWidth={10}
      gutterHeight={10}
      renderItem={(item) => (
        <div style={{ height: item.height }}>
          {item.content}
        </div>
      )}
      onReflow={(data) => {
        console.log('Grid reflowed:', data);
      }}
    />
  );
};

Using Ref to Trigger Reflow

You can manually trigger a reflow of the grid using a ref:

import { StackGrid, StackGridRef } from '@crob/react-stack-grid';
import { useRef } from 'react';

const YourComponent = () => {
  const gridRef = useRef<StackGridRef>(null);
  
  const handleReflow = () => {
    gridRef.current?.reflow();
  };

  return (
    <>
      <StackGrid
        ref={gridRef}
        items={items}
        columnMinWidth={200}
        gutterWidth={10}
        gutterHeight={10}
        renderItem={(item) => (
          <div style={{ height: item.height }}>
            {item.content}
          </div>
        )}
      />
      <button onClick={handleReflow}>Reflow Grid</button>
    </>
  );
};

Props

ReflowData Type

interface ReflowData {
  containerWidth: number;  // Width of the grid container
  columnCount: number;     // Number of columns in the grid
  columnWidth: number;     // Width of each column
}

Methods

reflow()

Manually triggers a recalculation of the grid layout. This is useful when you need to force a re-layout after dynamic content changes or other updates that might affect item heights.

Development

# Install dependencies
npm install

# Run tests
npm test

# Build package
npm run build

Contributing

Contributions are welcome! If you have an idea or suggestion, please feel free to fork the repository, make your changes, and submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.