use-draggable

react-draggable

A custom hook to make elements draggable.

Usage

Simplest usage:

import { useDraggable } from 'use-draggable';
 
function MyComponent(props) {
  const { targetRef } = useDraggable({ controlStyle: true });
 
  return (
    <div ref={targetRef}>
      <h1>You can drag me :)</h1>
    </div>
  );
}

Usage in a class component:

import React from 'react';
import { Draggable } from 'use-draggable';
 
class MyComponent extends React.Component {
  render() {
    return (
      <Draggable>
        {({ targetRef, handleRef }) => (
          <div ref={targetRef}>
            <h1>You can drag me :)</h1>
            <button ref={handleRef}>with this handle</button>
          </div>
        )}
      </Draggable>
    );
  }
}

Live demo

https://codesandbox.io/s/use-draggable-demo-tiu3w

Contribute

PRs are welcomed! Note - when opening a PR, make sure the last commit message abides commitizen guidelines.