use-draggable

Small library, inspired by react-draggable, for making elements draggable

• Demo

Install

npm install --save use-draggable

Usage

import React from 'react';
import useDraggable from 'use-draggable';

function Example() {
  const { ref } = useDraggable();
  
  return (
    <div ref={ref}>
      I can now be moved around!
    </div>
  );
}

useDraggable Props

{
  // Determines which axis the draggable can move. Accepted values:
  // - 'both' allows movement horizontally and vertically (default).
  // - 'x' limits movement to horizontal axis.
  // - 'y' limits movement to vertical axis.
  // - 'none' stops all movement.
  axis: string,
  
  // Determines in which position the element should be rendered initially.
  // The default value is null.
  initialPosition?: {
    x: number,
    y: number
  },
  
  // Determines how many pixels the draggable element can be moved from its initial position.
  // The default value is null, which means that are no limits to the element to be dragged.
  limit?: {
    top: number | null,
    right: number | null,
    bottom: number | null,
    left: number | null
  }
}

useDraggable Return

{
  // The draggable element
  ref: RefObject<any>,

  // Optional property in case you want to specify an element to be used as the handle that initiates drag.
  refHandle?: RefObject<any>,
  
  // Optional property in case you want the draggable element to be bounded to the area of a parent element.
  refBound?: RefObject<any>,
  
  // The position of the draggable element.
  position: { x: number, y: number },
  
  // Mouse properties.
  mouse: {
    position: { x: number, y: number },
    isPressed: boolean,
    isDragging: boolean,
    isDragStopped: boolean
  }
}

License

MIT © ricardo-jsx