Package Exports

react-draggify
react-draggify/dist/index.esm.js
react-draggify/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-draggify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-draggify

A React window management system that makes any component draggable and resizable within a 5x4 grid layout, with position persistence.

Features

🎯 Grid-based positioning (5x4)
🔄 Drag and resize capabilities
💾 Position persistence via localStorage
📱 Responsive design
🎨 Customizable styling
🎮 Collision detection

Installation

npm install react-draggify

Usage

Wrap your app with WindowManagerProvider:

import { WindowManagerProvider } from 'react-draggify';

function App() {
  return (
    <WindowManagerProvider>
      <YourComponents />
    </WindowManagerProvider>
  );
}

Make components draggable using withWindow HOC:

import { withWindow } from 'react-draggify';

const YourComponent = () => (
  <div>
    <h1>Draggable Content</h1>
  </div>
);

// Make it draggable, starting at grid position 0 (top-left)
const DraggableComponent = withWindow(YourComponent);

// Use it with a specific grid position (0-19)
<DraggableComponent pos={5} />

Grid System

The layout uses a 5x4 grid (20 total positions):

 0  1  2  3  4
 5  6  7  8  9
10 11 12 13 14
15 16 17 18 19

Examples

Basic Window

const Window = () => (
  <div style={{ padding: '20px', background: 'white' }}>
    <h2>Draggable Window</h2>
    <p>Drag me around!</p>
  </div>
);

const DraggableWindow = withWindow(Window);

// Place at position 0 (top-left)
<DraggableWindow pos={0} />

Multiple Windows

function MultiWindowExample() {
  return (
    <div>
      <DraggableWindow pos={0} /> {/* Top left */}
      <DraggableWindow pos={4} /> {/* Top right */}
      <DraggableWindow pos={15} /> {/* Bottom left */}
    </div>
  );
}

Custom Styling

const StyledWindow = () => (
  <div style={{
    background: 'linear-gradient(to right, #4facfe 0%, #00f2fe 100%)',
    padding: '20px',
    borderRadius: '8px',
    color: 'white'
  }}>
    <h2>Styled Window</h2>
  </div>
);

const DraggableStyledWindow = withWindow(StyledWindow);

API Reference

WindowManagerProvider

The root provider that enables window management functionality.

withWindow(Component, options)

HOC that makes a component draggable and resizable.

Props:

pos (number): Initial grid position (0-19)

useWindowManager()

Hook to access window management context.

License

MIT

Contributing

Pull requests are welcome. For major changes, please open an issue first.