DEV Community

Haikel Fazzani
Haikel Fazzani

Posted on

React Draggable Component

A simple and lightweight component for making elements draggable.

Demo

stackblitz

Installation

$ npm install drag-react
# yarn add drag-react
Enter fullscreen mode Exit fullscreen mode

Example

import { Draggable } from 'drag-react';

<Draggable>
  <div>My element is draggable now</div>
</Draggable>
Enter fullscreen mode Exit fullscreen mode

Props

name type default description
children any - Some element
className? string 'drag-react' Class name for drag wrapper
style? Object { position: 'fixed', left: '10px', top: '10px', zIndex: 99999 , cursor: 'move' } css style for drag wrapper
onDragStart? (_: DOMRect) => void - Called whenever the user mouses down
onDragEnd? (_: DOMRect) => void - Called when dragging stops

License

MIT

Top comments (0)