@reactivers/hooks Github link@reactivers/hooks NPM link



  • useHover tracks mouse position.
  • You can track mouse positions on your components easily.
const { isHover } = useHover();

Getting Started

  • You need to import useHover.

From Collection

import { useHover } from "@reactivers/hooks";

From Package

import { useHover } from "@reactivers/use-hover";



interface HoverProps {

	//ref object for register
    ref: MutableRefObject<any>;
	//If set false, doesn't watch hover action
    active?: boolean;// Default = true
	// Axis for Mouse/Touch position. If both set true then watches inside of element.
    axis?: { 
		// Default = true
		vertical?: boolean,
		// Default = true
		horizontal?: boolean
	// Add extra values to real measures
    offsets?: { top?: number, right?: number, bottom?: number, left?: number };
	//For touch enabled devices
    updateOnTouchEnd?: boolean;// Default = true
	//If set true, checkes for the border values.
    includeBorders?: boolean;// Default = true


interface HoverResponse {

	//returns hover state
    isHover: boolean;


Example Preview - CodeSandbox