@es-space/es-drager-react v0.0.13

✨ Features

• 🎯 Drag & drop with constraints
• 🔄 Rotation support
• ⚖️ Scale with mouse wheel
• 🔗 Connection points with bezier curves
• 📏 Snap to grid & alignment guides
• 🎨 Tailwind CSS styling
• 🎮 Rich interaction events

📦 Installation

# npm
npm install @es-space/es-drager-react

# yarn
yarn add @es-space/es-drager-react

# pnpm
pnpm add @es-space/es-drager-react

🚀 Usage

import { Drager } from '@es-space/es-drager-react'

function App() {
  return (
    <Drager
      className="w-32 h-32 bg-blue-500"
      rotatable
      scalable
      onDrag={pos => console.log(pos)}
    >
      Drag me!
    </Drager>
  )
}

📝 Props

🌰 Examples

Basic Dragging

<Drager className="w-32 h-32 bg-blue-500">
  Basic draggable element
</Drager>

With Rotation

<Drager
  className="w-32 h-32 bg-blue-500"
  rotatable
>
  Rotatable element
</Drager>

With Scaling

<Drager
  className="w-32 h-32 bg-blue-500"
  scalable
  minScale={0.5}
  maxScale={2}
>
  Scalable element
</Drager>

With Connections

<Drager
  id="drager1"
  className="w-32 h-32 bg-blue-500"
  connectable
  onConnect={(sourceId, sourceAnchor, targetId, targetAnchor) => {
    console.log('Connected:', { sourceId, sourceAnchor, targetId, targetAnchor })
  }}
>
  Connectable element
</Drager>

🔨 Development

# Install dependencies
bun install

# Start development
bun dev

# Build package
bun build

📄 License

ES Drager is open source software licensed as MIT.