jhaemin/react-draggg

Make your React elements draggable

React Dragggggggggggggggggg

Make your React elements draggable.

Demo

Installation

npm install react-draggg@latest

Usage

import Draggg from 'react-draggg'

const Page = () => {
  const [{ x, y }, setPosition] = useState({ x: 0, y: 0 })

  const onDrag = ({ deltaX, deltaY }) => {
    setPosition({
      x: x + deltaX,
      y: y + deltaY,
    })
  }

  return (
    <div className="page">
      <Draggg onDrag={onDrag}>
        <div style={{ left: x, top: y }}>Drag Me</div>
      </Draggg>
    </div>
  )
}

// Alternative usage (with basePosition)
const Page = () => {
  const [{ x, y }, setPosition] = useState({ x: 0, y: 0 })

  const onDrag = ({ x, y }) => setPosition({ x, y })

  return (
    <div className="page">
      <Draggg basePosition={{ x, y }} onDrag={onDrag}>
        <div style={{ left: x, top: y }}>Drag Me</div>
      </Draggg>
    </div>
  )
}

How it works?

It simply remembers the initial position when drag starts, then calculates the distance from the original position.

API

export type DragggData = {
  /**
   * Updated x-axis position based on the given `basePosition`.
   * If you don't pass anything to `basePosition`, it is same as `deltaX`.
   */
  x: number
  /**
   * Updated y-axis position based on the given `basePosition`.
   * If you don't pass anything to `basePosition`, it is same as `deltaY`.
   */
  y: number
  /**
   * x-axis Distance from the drag start.
   */
  deltaX: number
  /**
   * y-axis Distance from the drag start.
   */
  deltaY: number
}

export type DragggCallback = (data: DragggData) => void

export type DragggProps = {
  stopPropagation?: boolean
  onDrag?: DragggCallback
  onStart?: DragggCallback
  onEnd?: DragggCallback
  /**
   * The initial x, y on every drag start.
   */
  basePosition?: { x: number; y: number }
}

Comparison with React-Draggable

• React Draggg has a simpler API
• React Draggg is batteries-not-included
• React Draggg correctly stops touch event propagation
• React Draggg doesn't have its own state (it works like React-Draggable's DraggableCore)
• React Draggg doesn't expose the event objects which means you don't have full control over the events

License

MIT