Introduction :

Enhance your React applications with react-rnd – a versatile library for effortless implementation of resizable and draggable components. In this article, we will learn how to add drag and drop functionality in Next.js component.

Node.js :

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser. and NPM is a package manager for Node. js packages. The NPM program is installed on your computer when you install Node.js. To know more about relative links https://nodejs.org/en/docs/

Next js :

Next.js is a React framework. Next.js is constitutionally an excellent tool to achieve great SEO performance. building super-fast static websites that behave dynamically. Next.js when building UI and UX there is flexibility. and the important great community support. To know more about relative links click here

react-rnd :

The react-rnd library is a React component for creating resizable and draggable elements. It provides a simple and flexible way to add interactive behavior to components, allowing users to resize and drag them within specified boundaries. The library is useful for creating dynamic and responsive user interfaces in React applications.

Flow Diagram:

Prerequisites:

Node

Next js

react-rnd

Step 1: Install Nodejs

Before we create Next App, we need to install node.js.

if you already installed node.js please ignore this step 1 and go to step 2

Step 2: Create a Next-app

After installing Node.js open the terminal or command prompt and create the next.js app with the following commands.

npx create-next-app drag-resize-example

Step 3: Install react-rnd

After creating the Next.js app then install chart.js commands.

npm i react-rnd

Step 4: Configure react-rnd

In /pages/index.js, add the following code.

<div style={{ marginTop: '100px' }}>
      <div ref={parentRef} style={{ width: '1000px', height: '500px', marginLeft: 'auto', marginRight: 'auto', border: "1px solid gray" }}>
        <Rnd
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            border: "solid 1px #ddd",
            background: "#f0f0f0"
          }}
          bounds={'parent'}
          default={{
            x: 0,
            y: 0,
            width: 320,
            height: 200
          }}
        >
          <Image src={"/episycheland.jpg"} className='min-w-[100vw] min-h-[100vh]' layout='fill'></Image>
        </Rnd>
      </div>
    </div>

Sample code for the /pages/index.js file can be found in the following GitHub URL.

https://github.com/episyche/Nextjs-drag-and-resize-example/blob/main/pages/index.js

You can run your app via CLI with the following command and view it in your browser:

npm run dev

A Sample GitHub repo, with all the required configurations, is given below.

https://github.com/episyche/Nextjs-drag-and-resize-example

Step 5: Result

Please go to the web browser and try to access the next.js application (i.e. http://localhost:3000). An example output screenshot is given below.

How to Create Drag and Resize Functionality in Your Next.js Component