---
title: "useElementByPoint – Browser Hook Usage & Examples"
description: "`useElementByPoint` is a hook that returns the element at a given point. It is useful for implementing drag and drop, or for any other use case where you need t"
canonical: https://reactuse.com/browser/useelementbypoint/
---

# useElementByPoint

`useElementByPoint` is a hook that returns the element at a given point. It is useful for implementing drag and drop, or for any other use case where you need to know what element is at a given point.

`useElementByPoint` wraps [`document.elementFromPoint()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint) (or `elementsFromPoint()` in multi mode) to reactively query the DOM element at given x/y coordinates. It supports polling on an interval or via `requestAnimationFrame`, and returns a pausable object with the matched element, an `isSupported` flag, and `pause`/`resume` controls.

### When to Use

- Building element-inspection tools or visual debuggers that highlight hovered elements
- Implementing custom drag-and-drop logic that needs to detect drop targets at specific coordinates
- Creating interactive tutorials or onboarding overlays that identify UI elements under the cursor

### Notes

- **SSR-safe**: Returns `isSupported: false` and `null` element during server-side rendering. No `document` access occurs on the server.
- **Performance**: Use the `interval` option to control polling frequency. `requestAnimationFrame` provides the smoothest updates but uses more CPU.
- **Related hooks**: Combine with `useMouse` to track cursor position, and `useElementBounding` to get dimensions of the detected element.

## Usage

```tsx live noInline
function Demo() {
  const { clientX: x, clientY: y } = useMouse();
  const { element, pause, resume } = useElementByPoint({ x, y });
  const bounding = useElementBounding(element);

  useEventListener("scroll", bounding.update, null, { capture: true });
  const boxStyles = (() => {
    if (element) {
      return {
        display: "block",
        width: `${bounding.width}px`,
        height: `${bounding.height}px`,
        left: `${bounding.left}px`,
        top: `${bounding.top}px`,
        backgroundColor: "#3eaf7c44",
        transition: "all 0.05s linear",
        position: "fixed",
        pointerEvents: "none",
        zIndex: 9999,
        border: "1px solid var(--vp-c-brand)",
      };
    }
    return {
      display: "none",
    };
  })();
  const pointStyles = (() => ({
    transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
    position: "fixed",
    top: 0,
    left: 0,
    pointerEvents: "none",
    width: "8px",
    height: "8px",
    borderRadius: "50%",
    backgroundColor: "#4ade80",
    boxShadow: "0 0 2px rgba(0,0,0,0.3)",
    zIndex: 999,
  }))();

  return (
    <>
      <div style={boxStyles} />
      <div style={pointStyles} />
      <div style={{ display: "flex", alignItems: "center" }}>
        <span style={{ marginRight: "16px" }}>X: {x}</span>
      </div>
      <div style={{ display: "flex", alignItems: "center" }}>
        <span style={{ marginRight: "16px" }}>Y: {y}</span>
      </div>
      <div>
        <button onClick={pause}>Pause</button>
        <button onClick={resume}>Resume</button>
      </div>
    </>
  );
};

render(<Demo />);

```

%%API%%