Introduction

• 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

Props

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
}

Returns

interface HoverResponse {

	//returns hover state
    isHover: boolean;
}

Example

Run Example