ES Drager

Getting Started
Features
API

Scaling

ES Drager supports scaling functionality through mouse wheel interaction.

Basic Scaling

Enable scaling by setting the scalable prop:

Scroll to scale
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  scalable
>
  Scroll to scale
</Drager>

Use your mouse wheel while hovering over the element to scale it.

Scale Limits

You can control the minimum and maximum scale values using the minScale and maxScale props:

Limited scaling
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  scalable
  minScale={0.5}
  maxScale={2}
>
  Limited scaling
</Drager>

This element can only be scaled between 50% and 200% of its original size.

Scale Events

Track scale changes using the onScale event handler:

Check console
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  scalable
  onScale={(scale) => {
    console.log('Current scale:', scale)
  }}
>
  Check console
</Drager>

Open your browser's console to see the scale value being logged.

Combined Features

Scaling works seamlessly with dragging and rotation:

Try all features
<Drager
  style={{
    width: '128px',
    height: '128px',
    backgroundColor: '#3B82F6',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white'
  }}
  scalable
  rotatable
  minScale={0.5}
  maxScale={2}
>
  Try all features
</Drager>

This element can be dragged, rotated, and scaled.