This repo should have updates for React 18+ about react-grid-layout HOT 4 OPEN

"use client";

import React, { useMemo, useState, ReactNode } from "react";
import ReactGridLayout, { WidthProvider, Responsive } from "react-grid-layout";
import MyResponsiveLine from "@/grid-test/Chart";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";

import "../../grid-test/styles.css";
import { Box, Button, IconButton } from "@mui/material";

type Item = {
  i: string;
  x: number;
  y: number;
  w: number;
  h: number;
  component?: ReactNode;
};

type AddRemoveProps = {
  cols: { lg: number; md: number; sm: number; xs: number; xxs: number };
  rowHeight?: number;
};

const AddRemoveLayout = () => {
  const ResponsiveReactGridLayout = useMemo(
    () => WidthProvider(Responsive),
    []
  );

  const defaultAddRemoveValues: AddRemoveProps = {
    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
    rowHeight: 100,
  };

  const [items, setItems] = useState<Item[]>([]);

  const [newCounter, setNewCounter] = useState(0);


  const cols = defaultAddRemoveValues.cols;
  const rowHeight = defaultAddRemoveValues.rowHeight;
  console.log("cols", cols);
  console.log("rowHeight", rowHeight);

  const onAddItem = () => {
    console.log("adding", "n" + newCounter);
    const newItem = {
      i: "n" + newCounter,
      x: (items.length * 2) % (cols ? cols.lg : 12),
      y: Infinity,
      w: 2,
      h: 2,
      // add: false
      component: <MyResponsiveLine key={"n" + newCounter} />,
    };
    setItems([...items, newItem]);
    setNewCounter(newCounter + 1);
  };

  const onRemoveItem = (i: string) => {
    console.log("removing", i);
    setItems(items.filter((item) => item.i !== i));
  };

  const onLayoutChange = (layout: any) => {
    // setNewLayout(layout);
    console.log("the layout just changed ", layout);
  };

  const onBreakpointChange = (breakpoint: any, cols: any) => {
    console.log("the layout just changed ", breakpoint, cols);
  };

  return (
    <Box>
      <Button variant="outlined" onClick={onAddItem} style={{ color: "black" }}>
        Add Item
      </Button>
      <ResponsiveReactGridLayout
        onLayoutChange={onLayoutChange}
        onBreakpointChange={onBreakpointChange}
        cols={cols}
        rowHeight={rowHeight}
      >
        {items.map((item, index) => (
          <Box key={index} data-grid={item} className="react-grid-item">
            {item.component}
            <IconButton
              onClick={() => onRemoveItem(item.i)}
              sx={{
                position: "absolute",
                top: 0,
                right: "2px",
              }}
            >
              <CloseOutlinedIcon />
            </IconButton>
          </Box>
        ))}
      </ResponsiveReactGridLayout>
    </Box>
  );
};

export default AddRemoveLayout;