useDraggable

useDraggable hook provides a simple way to drag elements.

Import

import { useDraggable } from "@prismane/core/hooks";

Usage

function Demo() {
  const { ref, isDragging, position } = useDraggable();

  return (
    <Box w="100%" h={fr(80)} pos="relative" of="hidden">
      <Box
        w={fr(30)}
        h={fr(30)}
        bg={isDragging ? "teal" : "primary"}
        pos="absolute"
        t={position.y}
        l={position.x}
        ref={ref}
      >
        Drag Me
      </Box>
    </Box>
  );
}

API

Return Value

Name	Type	Description
`ref`	`RefObject<any>`	The ref of the draggable element.
`isDragging`	`boolean`	The state of the dragging action.
`position`	`{x: number, y: number}`	The position of the element.

Go BackuseDimensions

Up NextuseEmulatedFieldChange