Search code examples
reactjsmaterial-uiresizablereact-dndreact-beautiful-dnd

Resizing a material ui card component by click and dragging a corner

I have a list of material ui cards that are in a react-beautiful-dnd list. I want to be able to move cards from one list to another and reorganize them (this is already done). I also want to be able to click, for example, the lower right corner of a card and resize it however I want. Is that possible? If so, how? I have tried wrapping the cards in thing like react-grid-layout objects, but with no success, while my react app still comes up the cards are not rendered.

Thanks in advance for any help.

Solution

  • I found a simple solution and thought I would share. All I needed to do was wrap each material UI Card in a ResizableBox from react-resizable. Then after that, so the dimensions of the Card would follow the dimensions of the ResizableBox, I used material UI makeStyles to apply a width and height of 100% to the Card. And that was it.