I am looking for an easy way of allow a user to resize a div using handles and all relevant cursors. I see lots of examples using jquery but I would like to use it in react and jquery isn't required.
Does anyone know a easy way of doing this ? I presume pure js, css. I don't really want to use a react component for this, as I need to enable resizing on standard divs.
Of course it is for use with reactjs, is there a more modern way of doing this without jquery ?
** EDIT **
These are the cursors that could be used for each resizable point
e-resize ne-resize n-resize nw-resize s-resize se-resize w-resize sw-resize
Adding any element inside <Resizable> makes it resizable. The size attribute defines the size of the resizable component. onResizeStop defines what to do when the user tries to resize the element. Here we change width and height of the element in State which makes the required changes in the size attribute.
The mouse trigger the mousedown event on the resizer. Then catch the mousemove event on the resizer to handle begin to resize. With the bottom-right resizer, when the user drags that resizer, the element's width will equal to the x position of the mouse minus the x position of the element.
You can listen to the resize event in componentDidMount() and then update the dimensions ( width and height ). You should remove the listener in componentWillUnmount() method.
Heres an example of a great solution using react-resize-panel library https://www.npmjs.com/package/react-resize-panel
Put anything you want to show inside the divs, you can customize the handler too.
import ResizePanel from "react-resize-panel";
...
<div style={{
width: '80%',
height: '500px',
border: '1px solid black',
display: 'flex',
flexDirection: 'column'}}>
<ResizePanel direction='s' style={{backgroundColor: 'black', height: '50%'}}>
<div style={{backgroundColor: 'orange', height: '100%'}}>panel</div>
</ResizePanel>
<div style={{backgroundColor: 'purple', flexGrow: '1'}}>panel</div>
</div>
...
Hope this can help someone else
You can only with CSS, resize
property allows you to make that!
.resize {
border: 1px solid black;
overflow:auto;
}
.resize.horizontal {
resize: horizontal;
}
.resize.vertical {
resize: vertical;
}
.resize.both {
resize: both;
}
.wrap {
max-width: 80%;
}
<div class="wrap">
<div class="resize horizontal">Resize me!</div>
<div class="resize vertical">Resize me!</div>
<div class="resize both">Resize me!</div>
</div>
overflow
different than visible
(initial) is required and you can apply it to all elements whos overflow is setted with auto
, scroll
and hidden
.
I call this property marvellous!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With