Quick Start

Get started with ES Drager in just a few minutes.

Basic Usage

Import the Drager component and use it to wrap any content you want to make draggable:

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

function App() {
  return (
    <Drager className="w-32 h-32 bg-blue-500">
      Drag me!
    </Drager>
  )
}

Adding Features

Enable rotation and scaling with simple props:

Try all features!

<Drager
  className="w-32 h-32 bg-blue-500"
  rotatable
  scalable
  minScale={0.5}
  maxScale={2}
>
  Try all features!
</Drager>

Adding Connections

Enable connection points to create node-based interfaces:

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