Hook that makes a DOM element draggable.

100%

Hook that makes a DOM element draggable.

✓ Published0🌍 Public

Last edited Jul 6, 2021

Created on Dec 30, 2021

This example shows a React hook that makes any DOM element draggable by handling mouse events. The hook returns a ref to attach to the target element and a mouse-down handler; when the user presses and drags, it computes the new position from the initial click offset and calls a provided `onMove` callback with the updated coordinates. It uses React’s `useRef`, `useState`, `useEffect`, and `useCallback`, attaching global `mousemove` and `mouseup` listeners while dragging. The code relies on `getBoundingClientRect` to calculate the offset, enabling smooth, frame-accurate movement without external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

Hook that adds a click listener outside of an element.

This example demonstrates a React hook that detects clicks outside a referenced element. It returns a ref to attach to a component, and when a click event occurs, it checks whether the event target is contained within that element. If not, it invokes a callback. The hook uses React’s `useRef`, `useCallback`, and `useEffect` to manage the reference and listener, adding a document-level click listener and cleaning it up on unmount. The callback and its dependency list are passed as arguments, allowing flexible, memoized behavior.

Aabonello

73% match

Loading thumbnail…

Hook that listens for bounding box changes on a DOM element.

This example shows a React hook that tracks the bounding box of a DOM element and returns its updated width, height, x, and y coordinates. It uses the native `ResizeObserver` API to listen for size changes and `getBoundingClientRect()` to capture the element’s position and dimensions. The hook stores the rectangle in React state via `useState` and updates it through a `useEffect` that observes the element referenced by a `MutableRefObject`. The code is written in TypeScript and defines a `toRect` helper to normalize the `DOMRect` output, ensuring default values when the element is not yet available.

Aabonello

71% match

Loading thumbnail…

React Draw with Mouse

A React component renders an SVG circle that follows the mouse pointer across a 960×500 canvas. The SVG’s `onMouseMove` event updates React state via `useState`, and `useCallback` memoizes the handler to prevent unnecessary re-renders. The circle’s `cx` and `cy` coordinates are bound to the current mouse position, demonstrating a reactive, declarative drawing interaction. Unlike D3, this example relies solely on React’s state management and SVG’s native event handling to create a live, mouse-driven visualization.

Eekorre1001

67% match

Loading thumbnail…

React & D3 Drag with useReducer

This example shows three draggable circles connected by thick black lines in an SVG canvas. The circles and lines are rendered and updated using D3.js selectors and join operations, while React manages the application state. Dragging any circle dispatches a `drag` action to a `useReducer` hook, updating the circle’s x and y coordinates in the central state object. The D3 `drag` handler triggers the callback, and the Vue-like wrapper re-renders the visualization via the `viz.js` module. Animated interactivity is demonstrated through mouse hover effects and real-time position updates.

CCurran Kelleher

67% match

Loading thumbnail…

React Starter

This example demonstrates how to integrate React with D3 by building a resizable SVG container. A draggable div wrapper, observed via ResizeObserver, updates the SVG’s width and height state through a custom React hook (useState, useEffect) and D3’s drag behavior. The visualization shows the interplay between React’s declarative rendering and D3’s imperative event handling. It uses React 16, ReactDOM, d3.select, d3.drag, and d3.event to log and apply dynamic size changes.

Ggjonor

66% match

Loading thumbnail…

Interaction with React (Mouse Follower)

A circle follows the mouse cursor across an SVG canvas, updating its position in real time in response to pointer movement. The React state hook `useState` stores the current mouse coordinates, while the `onMouseMove` event handler updates that state through `setMousePosition`. The `useCallback` hook optimizes the event handler, and ReactDOM renders the component to the page. This example demonstrates how React manages interactive SVG rendering without any external data source or D3 dependency.

ZZoe Ferencova

66% match

Loading thumbnail…

useCallback - Mouse follower

A React application renders an SVG circle that follows the mouse cursor across a 960x500 canvas. The component uses the `useState` hook to track mouse position and `useCallback` to memoize the mouse-move event handler, preventing unnecessary re-renders. The `onMouseMove` event on the SVG element updates the circle's `cx` and `cy` attributes via D3-style coordinate mapping. The demo showcases React 16.9 hooks for state management and D3 v5 for SVG rendering, with the circle's position initialized at the canvas center before responding to user interaction.

HHalcyonWjr

65% match

Loading thumbnail…

Mouse mover

A React component tracks the mouse position over an SVG canvas and renders a black circle that follows the cursor. The circle’s center coordinates are updated through React’s `useState` hook and a `handleMouseMove` callback triggered by the SVG’s `onMouseMove` event. The code uses D3 v7 for SVG rendering within a React 17 application, with the circle’s radius fixed at 30 pixels and the initial position set to the center of a 960×500 viewport.

Pparidhi

65% match