Search code examples
javascriptreactjsgridreact-grid-layout

React-grid-layout library to create grid reverse collapse method

The initial grid layout should be a 1 row, 3 column grid with box numbers 1 to 3. When the collapse happens, the grid items should collapse in the order of 3, 2, 1 like reverse behaviour for the grid boxes.

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.3.4/react-grid-layout.min.js"></script>

<script type="text/babel">
const { ResponsiveReactGridLayout } = ReactGridLayout;

const GridLayout = () => {
  const layout = [
    { i: 'a', x: 0, y: 0, w: 1, h: 1 },
    { i: 'b', x: 1, y: 0, w: 1, h: 1 },
    { i: 'c', x: 2, y: 0, w: 1, h: 1 },
  ];

  return (
    <ResponsiveReactGridLayout
      className="layout"
      layouts={{ lg: layout }}
      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
      cols={{ lg: 3, md: 3, sm: 2, xs: 1, xxs: 1 }}
      rowHeight={200}
      width={800}
    >
      <div key="a" style={{ backgroundColor: '#FF5733', width: '100%', height: '100%' }}>Box 1</div>
      <div key="b" style={{ backgroundColor: '#C70039', width: '100%', height: '100%' }}>Box 2</div>
      <div key="c" style={{ backgroundColor: '#900C3F', width: '100%', height: '100%' }}>Box 3</div>
      <div key="d" style={{ backgroundColor: '#581845', width: '100%', height: '100%' }}>Box 4</div>
      <div key="e" style={{ backgroundColor: '#FFC300', width: '100%', height: '100%' }}>Box 5</div>
      <div key="f" style={{ backgroundColor: '#DAF7A6', width: '100%', height: '100%' }}>Box 6</div>
      <div key="g" style={{ backgroundColor: '#3498DB', width: '100%', height: '100%' }}>Box 7</div>
      <div key="h" style={{ backgroundColor: '#2980B9', width: '100%', height: '100%' }}>Box 8</div>
      <div key="i" style={{ backgroundColor: '#1ABC9C', width: '100%', height: '100%' }}>Box 9</div>
    </ResponsiveReactGridLayout>
  );
};

ReactDOM.render(<GridLayout />, document.getElementById('root'));
</script>
Solution

  • Reverse order for sm : react-grid-layout:

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.3.4/css/styles.css" />
</head>
<body>
  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.3.4/react-grid-layout.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-resizable/3.0.4/react-resizable.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const { Responsive: ResponsiveReactGridLayout } = ReactGridLayout;
    const GridLayout = () => {
      const layout = {
         lg : [
            { i: 'a', x: 0, y: 0, w: 1, h: 1 },
            { i: 'b', x: 1, y: 0, w: 1, h: 1 },
            { i: 'c', x: 2, y: 0, w: 1, h: 1 },
          ],
          sm : [
            { i: 'c', x: 0, y: 0, w: 1, h: 1 },
            { i: 'b', x: 0, y: 1, w: 1, h: 1 },
            { i: 'a', x: 0, y: 2, w: 1, h: 1 },
          ]
      };
      return (
        <ResponsiveReactGridLayout
          className="layout"
          layouts={layout}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 3, md: 3, sm: 1, xs: 1, xxs: 1 }}
          rowHeight={200}
          width={800}
        >
          <div key="a" style={{ backgroundColor: '#FF5733', width: '100%', height: '100%' }}>Box 1</div>
          <div key="b" style={{ backgroundColor: '#C70039', width: '100%', height: '100%' }}>Box 2</div>
          <div key="c" style={{ backgroundColor: '#900C3F', width: '100%', height: '100%' }}>Box 3</div>
        </ResponsiveReactGridLayout>
      );
    };
    const rootElement = document.getElementById('root');
    const root = ReactDOM.createRoot(rootElement);
    root.render(<GridLayout />);
  </script>
</body>
</html>