React Grid Builder

A reusable, customizable React component library for building flexible grid layouts with full nested grid support. Ideal for website editors, dashboards, and layout builders.

✨ Features

• 🧱 Drag-and-drop grid builder
• 🔁 Nested grid support
• 📐 Resizable, swappable grid items
• 🧠 Undo/redo support
• 💾 Optional persistence
• ⚛️ Built with React 18+ and Vite

📦 Installation

npm install @arslankhan24/react-grid-builder
# or
yarn add @arslankhan24/react-grid-builder

"peerDependencies": {
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

 Usage Example

import React from 'react';
import { GridProvider, GridContainer } from 'react-grid-builder';
import 'react-grid-builder/dist/style.css'; // Import the CSS globally

function App() {
  return (
    <GridProvider>
      <GridContainer />
    </GridProvider>
  );
}

export default App;

Nested Grid Support
When using GridContainer, clicking the pen icon on any block will open a nested grid editor with full functionality. The nested grid is fully editable, resizable, undoable, and updates the parent grid on close.

You don’t need to do anything special. Nested editing is built-in.

Components Overview

GridProvider
Wraps your app to provide global grid context (required).

jsx
Copy code
<GridProvider>
  <App />
</GridProvider>

GridContainer
The main editable grid interface. Handles layout, resizing, and nested grid editing.

jsx
Copy code
<GridContainer />

estedGridEditor
You don’t need to use this directly — it's invoked automatically when you click the edit (pen) icon on a grid item.

🎨 Styling
Grid styles are applied via:

js
Copy code
import 'react-grid-builder/dist/style.css';