Get Started

IntroductionInstallationChangelogContributing

Primitives

avatarsbento gridbuttonscarouselcheck boxcommand palettecontainersdrawerdropdownfile upload buttonfile upload dropboxheader blocksinput numberinput otpinput textkey listenermetermodalspaginationpopoverprogress barresizable containersscroll to topselectselect autocompletesteppersswitchtexttheme togglestooltip

Components

authenticationbannersbrand associationcardscookie consentdecrypt animationfile uploadfooterheadershero sectionpricingtestimonials

Hooks

useArtificialLoaderuseClickOutsideuseClipboarduseCookiesuseDelayuseDisableScrolluseFullscreenuseHashuseMousePositionuseOSuseProcessuseResizableuseScrollbaruseScrollTo
TwitterGitHub
Dark LogoStratik / UIbeta
useMousePosition

The useMousePosition hook provides real-time tracking of the mouse position, either globally or relative to a specific HTML element. This is useful for applications needing precise cursor positioning, such as custom drag-and-drop interfaces, canvas drawing, or interactive visualizations.

Parameters Values
NameTypeDefaultDescription
elementReact.RefObject<HTMLElement> | string-An optional reference or ID of the HTML element to calculate mouse position relative to. If not provided, defaults to the window.
Return Values
NameTypeDescription
mousePosition{ x: number , y: number}An object containing the current mouse coordinates { x, y }.

Usage

  • Global Mouse Position: Call useMousePosition() without arguments to track the cursor position relative to the entire window.
  • Element-specific Mouse Position: Pass a RefObject or element ID to useMousePosition() to track the cursor position relative to that element.

Mouse Position w.r.t Window

Mouse position: 0, 0

Mouse Position With Ref

Mouse position: 0, 0

Move the mouse over the element to see the mouse position RELATIVE to the element

Mouse Position With Id

Mouse position: 0, 0

Move the mouse over the element to see the mouse position RELATIVE to the element