react-resizable | A simple React component that is resizable with a handle | Frontend Framework library

I'm using ResizeBox and want to wrap the contents inside of it. However, it's not working. The code is in the sandbox here. I've tried with other components too (other than div) and the same problem happens.

So I installed Jest in a new project and the app stopped running, due to the error below.

Summary: It's telling me that I've manually installed a dependency to node_modules, something I didn't do, and it's asking me to delete my entire node_modules and yarn.lock. But those steps aren't working.

Note: Removing the dependency from package.json then deleting node_modules and yarn.lock does fix the problem, but when I install jest again, it falls into the same problem.

The steps I took to install jest, here:

I am using react-resizable , I create a demo based on the demo code here:

I have the following code to resize an element in React. The element is resized using setEffect while providing dynamic width and height.

I want to scale the element on height change instead of resizing it so when the windows height is changed, the element is scaled down instead of resized. How to do so ? Keeping the same ratio.

https://codesandbox.io/s/boring-hermann-vmweu?file=/src/index.js

Is there a way to include jQuery and jQuery UI in my react app that is embedded in 3rd party websites without polluting the unsuspecting host site with those libraries?

Update. Comments asked for reasons.

I need Draggable, resizeable, Rotatable features. There is a react-resizable-rotatable-draggable library, which is no longer supported and seems hard to style. I'm converting an existing app that uses Jquery UI so exploring that option makes sense.

I am trying to integrate React Grid Layout in my Next.js application. As part of the installation process, they have said, include the following stylesheet in my application:

I have an Ant Design table where columns are resizable using react-resizable and drag-able using react-drag-listview.

All of the features are working nicely although there is a bug that exhibits itself under certain circumstances which means that the entire solution to having those features working together might not be viable or ready for production.

Here is the correct behaviour - when clicking on a table header cell the entire cell is dragged and you can see the box-shadow around its borders like this:

The bug is that sometimes after resizing a column and then clicking the header cell of the column to the right, the header cell is not dragged, only the the content (text in this case) / column title is, which looks like this:

Here is a code sandbox and a step by step guide on how to recreate the bug:

1. Go to the code sandbox
2. Click on the right hand border of any column
3. Drag and resize that column to the right / bigger until the mouse is over the title of the column to the right of it like this:

1. As soon as you have done this lift the mouse button up and press it down on the title of the column you are hovering over i.e. (click on the title of that column to the right)
2. Drag the column

Sometime the behaviour is intermittent but it is easily reproducible and may be more visible if the steps are repeated quickly.

How can this bug be solved?

I have a React-mui draggable dialog component on which I am using resizable box:

I am trying to implement both resizable and drag and drop columns in Ant Design's Table component.

I have got both working independently but cannot make them work without errors or bugs at the same time. I need to be able to drag on a column border and resize it horizontally and also be able to click on a the column header and drag and drop it.

I am looking for these functionalities to be similar to the features of this table: https://www.ag-grid.com/example.php

I have tried implementing it with react-resizable for resizable columns and both react-sortable-hoc and react-drag-listview for drag and dropping column order.

With the react-drag-listview the latest problem is that I must disable one feature when using the other, and in Firefox, this results in the error:

Uncaught TypeError: target.parentNode

I can't find any examples of both of these features being used together with the Ant D table but I'm sure it must be possible to make them work simultaneously.

TIA