React: Resizing a div including handlers, different cursors i.e ns-resize - no jquery

Question

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

Solution 1

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>

Requirements

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!

Solution 2

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