ES Drager

Getting Started
Features
API

ES Drager

A lightweight React component for creating draggable, rotatable, scalable and skewable elements with connection capabilities.

Overview

ES Drager provides a simple yet powerful way to add drag, rotate, scale, resize, and skew functionality to any React component. With built-in support for connections, alignment guides, position constraints, and snapping, it's perfect for building:

  • Diagram editors
  • Visual builders
  • Interactive interfaces
  • Layout tools
  • Flow charts
  • Design tools

Interactive Demo

Basic
Connections
Try me!

Quick Example

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

function App() {
  return (
    <Drager
      style={{
        width: '128px',
        height: '128px',
        backgroundColor: '#3B82F6'
      }}
      rotatable
      scalable
      resizable
      connectable
      showGuides
      limit={{ minX: 0, maxX: 500, minY: 0, maxY: 500 }}
      onConnect={({ sourceId, sourceAnchor, targetId, targetAnchor }) => {
        console.log('Connected:', { sourceId, sourceAnchor, targetId, targetAnchor })
      }}
    >
      Try me!
    </Drager>
  )
}

Next Steps