JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div id="container" class="container">


<div id="resizable" class="resizable">
<button id="reset">
reset
</button>
<div class="content">
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here.

Th
</div>

  <div id="resizer" class="resizer bottom-right"></div>
</div>
</div>

SCSS

body {
  margin: 0;

}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.container {
  background: green;
  padding: 20px;
  width: 100vw;
  height: 100vh;
}
.resizable {
  padding: 10px;
  background: pink;
  position: relative;
}

.content {


}
.resizer {
  position: absolute;
  overflow: hidden;
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: 0.2s linear opacity;

  &:hover {
    opacity: 1;
  }
}

.resizer.bottom-right {
  bottom: -4px;
  right: -4px;
  border-bottom: solid 2px black;
  border-right: solid 2px black;
}

JavaScript

let previousClientX = 0;
let previousClientY = 0;
let xDiff = 0;
let yDiff = 0;
let width;
let height;

reset.addEventListener('click', () => {
	resizable.style.width = 'auto';
	console.log('click reset')
})

function mouseUp() {
	console.log('mouseup');
  container.removeEventListener('mouseup', mouseUp);
  container.removeEventListener('mousemove', mouseMove);
}

function mouseMove(event) {
  const clientX = event.clientX;
  const clientY = event.clientY;
  
  xDiff = clientX - previousClientX;
  yDiff = clientY - previousClientY;
  
  width = width + xDiff;
  height = height + yDiff;
  
  resizable.style.width = `${width}px`;
  resizable.style.height = `${height}px`;
  console.log(width, height)
  previousClientX = event.clientX;
  previousClientY = event.clientY;
}

resizer.addEventListener('mousedown', (event) => {
  previousClientX = event.clientX;
  previousClientY = event.clientY;
  width = resizable.offsetWidth;
  height = resizable.offsetHeight;
  
  container.addEventListener('mousemove', mouseMove);
  container.addEventListener('mouseup', mouseUp);
});