Draggable And Resizable Panel With React Hooks. Part 2.

In this part we will add the ability to resize our panel in any direction!

If you haven’t read Part 1 please take a look cause the following code will be based on what we’ve already achieved.

Resizable Panel

To keep things short let’s create a Resizer component inside Panel/components folder and add the following code:

Each of the divs will be responsible for handling resizing in its own direction. In order for that to work, let’s add some styling to Resizer/styles.css file:

.top-left {
    position: absolute;
    cursor: nwse-resize;
    height: 10px;
    width: 10px;
    z-index: 2;
    left: 0;
    top: 0;
}
.top {
    position: absolute;
    cursor: ns-resize;
    height: 4px;