How set lockAspectRatio for gridItem in react-grid-layout

Question

I'm new in React and I tried use react-grid-layout. I can't create gridItem (className='block') with a fixed aspect ratio. I think lockAspectRatio prop from Resizable component must be use.

How create div (key="a","b","c","d") with lockAspectRatio=true?

import React, {Component} from 'react'
import GridLayout from 'react-grid-layout';
import Draggable from 'react-draggable';

import '../../../node_modules/react-grid-layout/css/styles.css'
import '../../../node_modules/react-resizable/css/styles.css'
import './dashboard.css'

class Dashboard extends Component {
  render() {
    // layout is an array of objects, see the demo for more complete usage
    const layout = [
      {i: 'a', x: 0, y: 0, w: 6, h: 8, minW: 4, maxW: 8},
      {i: 'b', x: 8, y: 0, w: 6, h: 8, minW: 4, maxW: 8},
      {i: 'c', x: 0, y: 0, w: 6, h: 8, minW: 4, maxW: 8},
      {i: 'd', x: 8, y: 0, w: 6, h: 8, minW: 4, maxW: 8}
    ];


    return (
      <div>
      <Draggable>
        <div className='block button-block'>
          <div className='title'>Hello!</div>
          <div className='content'>
            <button>Push</button>
          </div>
        </div>
      </Draggable>
      <GridLayout
        className="layout"
        layout={layout}
        cols={12}
        rowHeight={30}
        width={1200}
        draggableHandle = '.MyDragHandle'
        draggableCancel = '.MyDragCancel'

      >
        <div key="a" className='block'>
          <div className='MyDragHandle title'>Window 1</div>
          <div className='content'></div>
        </div>
        <div key="b" className='block'>
          <div className='MyDragHandle title'>Window 2</div>
          <div className='content'>
          </div>
        </div>
        <div key="c" className='block'>
          <div className='MyDragHandle title'>Window 3</div>
          <div className='content'></div>
        </div>
        <div key="d" className='block'>
          <div className='MyDragHandle title'>Window 4</div>
          <div className='content'></div>
        </div>
      </GridLayout>
      </div>
    )
  }
}

export default Dashboard

Answer 1

I hope somebody could use this as answer to the question. I found a way to implement my own resize with preserving aspect ratio in react-grid-layout:

const handleResize = useCallback(
    (l, oldLayoutItem, layoutItem, placeholder) => {
      const heightDiff = layoutItem.h - oldLayoutItem.h;
      const widthDiff = layoutItem.w - oldLayoutItem.w;
      const changeCoef = oldLayoutItem.w / oldLayoutItem.h;
      if (Math.abs(heightDiff) < Math.abs(widthDiff)) {
        layoutItem.h = layoutItem.w / changeCoef;
        placeholder.h = layoutItem.w / changeCoef;
      } else {
        layoutItem.w = layoutItem.h * changeCoef;
        placeholder.w = layoutItem.h * changeCoef;
      }
    },
    []
  );

There is no working way to pass down lockAspectRatio. If anyone could improve my method, feel free to comment!