ResizableDraggableGrid

A flexible and customizable React grid component that allows dragging and resizing of widgets with grid-based positioning.

Features

• Drag and drop widget placement
• Grid-based snap positioning
• Resizable widgets
• Customizable grid dimensions and cell size
• Callback support for widget updates

Installation

npm install resizable-draggable-grid
# or
yarn add resizable-draggable-grid

Usage

import React from "react";
import ResizableDraggableGrid, { Widget } from "resizable-draggable-grid";

const MyDashboard: React.FC = () => {
  const widgets: Widget[] = [
    {
      id: "1",
      title: "Widget 1",
      x: 0,
      y: 0,
      width: 200,
      height: 150,
      content: <div>Widget content goes here</div>,
    },
    // More widgets...
  ];

  const handleWidgetUpdate = (updatedWidgets: Widget[]) => {
    // Handle widget position/size changes
    console.log(updatedWidgets);
  };

  return (
    <ResizableDraggableGrid
      widgets={widgets}
      gridWidth={800}
      gridHeight={600}
      cellSize={50}
      onUpdate={handleWidgetUpdate}
    />
  );
};

export default MyDashboard;

Props

ResizableDraggableGridProps

| Prop | Type | Description | Required | | ------------ | ----------------------------- | --------------------------------------- | -------- | | widgets | Widget[] | Array of widget configurations | Yes | | gridWidth | number | Total width of the grid in pixels | Yes | | gridHeight | number | Total height of the grid in pixels | Yes | | cellSize | number | Size of each grid cell in pixels | Yes | | onUpdate | (widgets: Widget[]) => void | Callback when widgets are moved/resized | Optional |

Widget Interface

| Property | Type | Description | | --------- | ----------------- | ------------------------------------ | | id | string | Unique identifier for the widget | | title | string | Title displayed in the widget header | | x | number | X position (left) in pixels | | y | number | Y position (top) in pixels | | width | number | Width of the widget in pixels | | height | number | Height of the widget in pixels | | content | React.ReactNode | Content to display inside the widget |

Features

• Grid-based positioning with snap-to-grid functionality
• Drag and drop widget repositioning
• Resizable widgets with a bottom-right resize handle
• Delete widget functionality
• Customizable grid and widget styling

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This package is licensed under the MIT License.