🚀 drag-resize-component

A lightweight, customizable drag-and-resize grid layout component for React.

Build interactive dashboards where users can move, resize, and control components dynamically — without layout breaking or unwanted whitespace.

✨ Features

• 🧩 Drag & Drop Layout Move components freely inside a grid

• 📏 Resizable Items Resize components dynamically

• 🎯 Smart White Space Awareness Clearly exposes unused grid space so you can control layout precisely
  No hidden auto-adjustments or unexpected gaps

• 🎯 Per-Item Control Disable drag or resize for specific items

• ⚙️ Fully Customizable Control behavior globally or per component

• ⚡ Lightweight & Fast Minimal dependencies, optimized performance

📦 Installation

npm install drag-resize-component

🚀 Usage

import GridLayout from "drag-resize-component";

function App() {
  return (
    <GridLayout
      layout={[
        { i: "a", x: 0, y: 0, w: 2, h: 2 },
        { i: "b", x: 2, y: 0, w: 2, h: 2 },
        { i: "c", x: 0, y: 2, w: 2, h: 2 },
        { i: "d", x: 2, y: 2, w: 2, h: 2 },
        { i: "e", x: 0, y: 4, w: 2, h: 2 }
      ]}
    >
      <Test key="a" />
      <Test key="b" />
      <Test key="c" />
    </GridLayout>
  );
}

export default App;

🧠 Layout Configuration

Each item in the layout array supports:

| Property | Type | Description | | ---------- | ------- | ------------------------------ | | i | string | Unique identifier | | x | number | X position | | y | number | Y position | | w | number | Width | | h | number | Height | | noresize | boolean | Disable resizing for this item | | nodrag | boolean | Disable dragging for this item |

🎯 Example

layout={[
  { i: "a", x: 0, y: 0, w: 2, h: 2, noresize: true },
  { i: "b", x: 2, y: 0, w: 2, h: 2, nodrag: true }
]}

🔥 Why this library?

Most grid systems suffer from:

• ❌ unwanted white space
• ❌ rigid layouts
• ❌ complex configuration

👉 This library solves:

• ✅ Developers can detect empty grid space and restrict saving invalid layouts
• ✅ Simple API
• ✅ Flexible controls

📄 License

MIT © Ayush Chaurasia

⭐ Support

If you like this project, give it a ⭐ on GitHub!