gridstack.js/react at master · gridstack/gridstack.js

React GridStack Wrapper Demo

A React wrapper component for GridStack that provides better TypeScript support and React integration experience.

TODO

Component mapping
SubGrid support
Save and restore layout
Publish to npm

Basic Usage

This is not an npm package, it's just a demo project. Please copy the relevant code to your project to use it.

import {
  GridStackProvider,
  GridStackRender,
  GridStackRenderProvider,
} from "path/to/lib";
import "gridstack/dist/gridstack.css";
import "path/to/demo.css";

function Text({ content }: { content: string }) {
  return <div>{content}</div>;
}

const COMPONENT_MAP = {
  Text,
  // ... other components
};

// Grid options
const gridOptions = {
  acceptWidgets: true,
  margin: 8,
  cellHeight: 50,
  children: [
    {
      id: "item1",
      h: 2,
      w: 2,
      content: JSON.stringify({
        name: "Text",
        props: { content: "Item 1" },
      }),
    },
    // ... other grid items
  ],
};

function App() {
  return (
    <GridStackProvider initialOptions={gridOptions}>
      <!-- Maybe a toolbar here. Access to addWidget and addSubGrid by useGridStackContext() -->

      <!-- Grid Stack Root Element -->
      <GridStackRenderProvider>
        <!-- Grid Stack Default Render -->
        <GridStackRender componentMap={COMPONENT_MAP} />
      </GridStackRenderProvider>

      <!-- Maybe other UI here -->
    </GridStackProvider>
  );
}

Advanced Features

Toolbar Operations

Provide APIs to add new components and sub-grids:

function Toolbar() {
  const { addWidget, addSubGrid } = useGridStackContext();

  return (
    <div>
      <button onClick={() => addWidget(/* ... */)}>Add Component</button>
      <button onClick={() => addSubGrid(/* ... */)}>Add SubGrid</button>
    </div>
  );
}

Layout Saving

Get the current layout:

const { saveOptions } = useGridStackContext();

const currentLayout = saveOptions();

API Reference

GridStackProvider

The main context provider, accepts the following properties:

initialOptions: Initial configuration options for GridStack

GridStackRender

The core component for rendering the grid, accepts the following properties:

componentMap: A mapping from component names to actual React components

Hooks

useGridStackContext(): Access GridStack context and operations
- addWidget: Add a new component
- addSubGrid: Add a new sub-grid
- saveOptions: Save current layout
- initialOptions: Initial configuration options