Draggable And Resizable Panel With React Hooks. Part 1.

In this part we will create a panel that can be freely dragged with react and react hooks.

I’ve created a new react app using npx create-react app and deleted the default files, so right now the project structure looks like this:

Panel Component

Let’s add a components folder inside the src folder and create a Panel component.

Add the following code inside thePanel/Panel.js file:

To display the panel on the screen will we use react portals. To make our lives a little bit easier let’s install a react-useportal package:

npm i react-useportal

or if you are using yarn:

yarn add react-useportal

Having the package installed let’s add a new div element to thepublic/index.html file that will render our panel: