Andras/BoundlessFlowCampus2K

Fork 0

Research regarding react-grid-layout #179

New issue

Closed

opened 2026-04-08 11:12:33 +00:00 by a24vinla · 4 comments

a24vinla commented

2026-04-08 11:12:33 +00:00

Collaborator

Documentation: https://github.com/react-grid-layout/react-grid-layout

Parent Issues: #106 #134 #133

We need to research and test how to implement the card functionality provided by the library react-card-grid. Feel free to test whatever you deem to be relevant and provide comments and gifs/screenshot if possible in issue comments. Documentation: https://github.com/react-grid-layout/react-grid-layout Parent Issues: #106 #134 #133

a24vinla added the

project documentation

frontEnd

research

labels

2026-04-08 11:12:33 +00:00

b24idalu was assigned by c24elipe

2026-04-08 11:14:16 +00:00

b24idalu commented

2026-04-08 14:29:51 +00:00

Collaborator

import React from 'react';
import ReactGridLayout, { useContainerWidth } from "react-grid-layout";
import TemperatureView from '../../features/temperature/TemperatureView'; // Card children here

import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

export default function MyGrid({ children }) {
  const { width, containerRef, mounted } = useContainerWidth();

  const layout = [
    { i: "1", x: 0, y: 0, w: 1, h: 2, static: true }, // Static is sticky.
    { i: "2", x: 1, y: 0, w: 1, h: 2, minW: 1, maxW: 6,minH:2,maxH:10}, // Max/min height/width.
    { i: "3", x: 4, y: 0, w: 1, h: 2 } // i == key
  ];

  return (
    <div ref={containerRef}>
      {mounted && (
        <ReactGridLayout
          layout={layout}
          width={width}
          gridConfig={{ cols: 4, rowHeight: 60 }}
        >
          <div key="1"><TemperatureView /></div>
          <div key="2"><TemperatureView /></div>
          <div key="3"><TemperatureView /></div>
        </ReactGridLayout>
      )}
    </div>
  );
}

I added following code to a separate file in the app folder and got the following result. One can change the width and height of the space the card should occupy. Important to note that in the constant layout, i represent the key in the div. So each card will need an id.

``` import React from 'react'; import ReactGridLayout, { useContainerWidth } from "react-grid-layout"; import TemperatureView from '../../features/temperature/TemperatureView'; // Card children here import "react-grid-layout/css/styles.css"; import "react-resizable/css/styles.css"; export default function MyGrid({ children }) { const { width, containerRef, mounted } = useContainerWidth(); const layout = [ { i: "1", x: 0, y: 0, w: 1, h: 2, static: true }, // Static is sticky. { i: "2", x: 1, y: 0, w: 1, h: 2, minW: 1, maxW: 6,minH:2,maxH:10}, // Max/min height/width. { i: "3", x: 4, y: 0, w: 1, h: 2 } // i == key ]; return ( <div ref={containerRef}> {mounted && ( <ReactGridLayout layout={layout} width={width} gridConfig={{ cols: 4, rowHeight: 60 }} > <div key="1"><TemperatureView /></div> <div key="2"><TemperatureView /></div> <div key="3"><TemperatureView /></div> </ReactGridLayout> )} </div> ); } ``` I added following code to a separate file in the app folder and got the following result. One can change the width and height of the space the card should occupy. Important to note that in the constant layout, i represent the key in the div. So each card will need an id.

grit.gif

2.9 MiB

c22abdal commented

2026-04-08 14:45:03 +00:00

Collaborator

Testing:
I prototyped a simple dashboard using three cards (the existing cards) and it works well. There is a negative side with the card not resizing vertically, but again, it has a simple solution of writing more CSS code for the card. The issue is when resizing vertically, it can take space without showing as displayed in the images and gif.

For this prototype i used only three cards using the following code:

function App() {
  const layout = [
    { i: "temp", x: 0, y: 0, w: 2, h: 2 },
    { i: "parking", x: 2, y: 0, w: 2, h: 2 },
    { i: "rooms", x: 6, y: 0, w: 2, h: 4 },
  ];

  return (
    <div style={{ width: "100%" }}>
      <GridLayout layout={layout} cols={6} rowHeight={100} width={1020} isResizable={true} resizeHandles={["se"]}>
        <div key="temp">
          <Card title="Temperature">22°C</Card>
        </div>

        <div key="parking">
          <Card title="Parking">Available: 12</Card>
        </div>
        
        <div key="Rooms">
          <Card title="Rooms">Available: 20</Card>
        </div>
        
      </GridLayout>
    </div>
  );
}

However, if the dashboard needs more cards to be added the simplest way is as follows:

function App() {
  const cards = [
    { id: "temp", title: "Temperature", content: "22°C" },
    { id: "parking", title: "Parking", content: "12 spots available" },
    { id: "humidity", title: "Humidity", content: "48%" },
    { id: "wind", title: "Wind", content: "14 km/h" },
    //add here
  ];

  const layout = [
    { i: "temp", x: 0, y: 0, w: 2, h: 2 },
    { i: "parking", x: 2, y: 0, w: 2, h: 2 },
    { i: "humidity", x: 4, y: 0, w: 2, h: 2 },
    { i: "wind", x: 0, y: 2, w: 2, h: 2 },
    //add here
  ];

  return ( //no need to add here
    <GridLayout layout={layout} cols={6} rowHeight={100} width={800}>
      {cards.map((card) => (
        <div key={card.id} style={{ height: "100%" }}>
          <Card title={card.title}>{card.content}</Card>
        </div>
      ))}
    </GridLayout>
  );
}

Opinion on library: Overall the react-grid-layout is responsive and simple to use and prototype. The only downside is default highlight color. The good thing is it is easily editable in CSS. The functionality of dragging, sizing, and placing is preimplemented in the library, so no implementation is needed for this project. But modifications can be added if necessary. Testing: I prototyped a simple dashboard using three cards (the existing cards) and it works well. There is a negative side with the card not resizing vertically, but again, it has a simple solution of writing more CSS code for the card. The issue is when resizing vertically, it can take space without showing as displayed in the images and gif. ![image](/attachments/c6424fae-d565-40e7-a28c-536d0830a437) ![image](/attachments/655571b0-1e74-4aad-967a-9a08293238db) ![React-layout](/attachments/c76834d0-6bdd-4b4f-a23e-91b0551acc6c) For this prototype i used only three cards using the following code: ``` function App() { const layout = [ { i: "temp", x: 0, y: 0, w: 2, h: 2 }, { i: "parking", x: 2, y: 0, w: 2, h: 2 }, { i: "rooms", x: 6, y: 0, w: 2, h: 4 }, ]; return ( <div style={{ width: "100%" }}> <GridLayout layout={layout} cols={6} rowHeight={100} width={1020} isResizable={true} resizeHandles={["se"]}> <div key="temp"> <Card title="Temperature">22°C</Card> </div> <div key="parking"> <Card title="Parking">Available: 12</Card> </div> <div key="Rooms"> <Card title="Rooms">Available: 20</Card> </div> </GridLayout> </div> ); } ``` However, if the dashboard needs more cards to be added the simplest way is as follows: ``` function App() { const cards = [ { id: "temp", title: "Temperature", content: "22°C" }, { id: "parking", title: "Parking", content: "12 spots available" }, { id: "humidity", title: "Humidity", content: "48%" }, { id: "wind", title: "Wind", content: "14 km/h" }, //add here ]; const layout = [ { i: "temp", x: 0, y: 0, w: 2, h: 2 }, { i: "parking", x: 2, y: 0, w: 2, h: 2 }, { i: "humidity", x: 4, y: 0, w: 2, h: 2 }, { i: "wind", x: 0, y: 2, w: 2, h: 2 }, //add here ]; return ( //no need to add here <GridLayout layout={layout} cols={6} rowHeight={100} width={800}> {cards.map((card) => ( <div key={card.id} style={{ height: "100%" }}> <Card title={card.title}>{card.content}</Card> </div> ))} </GridLayout> ); } ``` ![image](/attachments/a48453f4-2742-4bce-ae4d-df1103ad8b81)

image.png

15 KiB

image.png

17 KiB

React-layout.gif

868 KiB

image.png

15 KiB

a24vinla commented

2026-04-09 06:59:16 +00:00

Author

Collaborator

Looks really good, thanks for supplying gifs!

b24idalu commented

2026-04-09 08:21:25 +00:00

Collaborator

  const layout = [
    { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } // different screen types
  ];

And to change the compactor so that people can freely place cards anywhere on the screen, one simply adds following to the ReactGridLayout tag. Default value is vertical. It seems to be a bit glitched however, so one may need to look into that a bit more.. Saw that there is a "preventCollision" rule that could most likely solve the issue.
compactor={noCompactor} // horizontal, vertical, none

There is an option for the layout where all cards start taking up the same amount of space, could be worth using. It changes sizes of cards depending on screen size (pc vs mobile view?). Could be combined with breakpoint. ``` const layout = [ { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } // different screen types ]; ``` And to change the compactor so that people can freely place cards anywhere on the screen, one simply adds following to the ReactGridLayout tag. Default value is vertical. It seems to be a bit glitched however, so one may need to look into that a bit more.. Saw that there is a "preventCollision" rule that could most likely solve the issue. `compactor={noCompactor} // horizontal, vertical, none`

a24vinla closed this issue

2026-04-09 09:15:57 +00:00