Fork of the of the react-grid-layout library.

This library addresses several issues with regards to the original version

• The code is rewritten in typescript
• The code uses only functional react components and hooks
• The project is based on a Vitejs toolchain
• The code does not have external dependencies (notably, no dependency on react-draggable and react-resizable)
• The code relies on actual HTML Drag and Drop events, which enables scenarii where one drags a cell from a grid-layout to another, which was not possible with the original version (Indeed, react-draggable is not based on HTML Drag and Drop events)

Table of Contents

• Demo and samples

Installing

npm install @ulgaal/react-grid-layout

# or if you use yarn

yarn add @ulgaal/react-grid-layout

Usage

// ES6
import { GridLayout } from "@ulgaal/react-grid-layout";

const MyComponent = () => (
  <div>
    <GridLayout
      id={rowId}
      layout={[{i:0, x:0,y:0,w:1,h:1},{i:1, x:1,y:0,w:2,h:1}]}
      cols={5}
      rowHeight={30}
      width={400}
    >
      <span data-id={0}>Hello</span>
      <span data-id={1}>World</span>
    </GridLayout>
  </div>
);

Documentation

• Reference documentation provides a component-level autogenerated doc

Demo and samples

Be sure to check the kitchen-sink app as it contains a sample with two grids, cell resizing, cell transfer between grids, ..., complete with source-code, documentation.