This repo should have updates for React 18+

[lkarvec]

Describe the bug

The React Team both has new declarations for class components and recommends we don't use them because they won't support new features for these components. This means this repository needs to update it's documentation and legacy code as we get further and further away from the deprecation, that way the library continues to remain relevant with the now industry standard use of React functional components. The React Team may not currently have plans to remove Class support, but we won't be able to tell in any new major version if this will still be the case, and a majority of new users and applications are going to be only using functional components anyways.

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

N/A

Expected behavior

N/A

react-grid-layout library version

1.4.4

Operating System Version

N/A

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[Thebks]

Yeh I was wondering about the same thing because I would like to implement DnD feature in my project like Grafana

I checked the examples for react-grid-layout but they are implemented using class-based components which React.js itself doesn't recommend. I would like to use functional components and hooks. I tried to convert one of the examples into a functional component but what I'm not able to do is make the items maintain their sizes and positions when I change the screen size from large to small and back to large screen.

Currently, this is how the code looks

"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;

I tried to lookin to Grafana's code but I couldnt make any sense of it

[sikhaman]

I would say if you want to have more fresh version, of this library wit same functionality try to look at gridstack

[lkarvec]

Still doesn't technically fit my needs.

[Thebks]

@sikhaman I just the website and it looks promising. I will let you know how it works out for me

Thank You.