React: resizing divs, including handlers, various cursors ie ns-resize - no jquery

Question

I am looking for an easy way to allow a user to resize a div using handles and all the corresponding cursors. I see many examples using jquery, but I would like to use it in a reaction and jquery is not required.

Does anyone know an easy way to do this? I assume pure js, css. I really do not want to use a reaction component for this, since I need to enable resizing in standard divs.

Of course, for use with reactjs, is there a more modern way to do this without jquery?

** EDIT **

These are cursors that can be used for each modifiable point.

e-resize ne-resize n-resize nw-resize s-resize se-resize w-resize sw-resize

Answer 1

You can only use CSS property resizeto do this!

.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>

Run code

Requirements

overflowother than visible(initial), and you can apply it to all elements whose overflow is set with auto, scrolland hidden.

I call this property wonderful!