useHover

Hook that defines the logic when hovering an element

elements

medium

test coverage

Last changed: 1 minute ago

Installation

Library

CLI

Manual

import { useHover } from '@siberiacancode/reactuse';

Usage

const hovering = useHover(ref, () => console.log('callback'));
// or
const hovering = useHover(ref, options);
// or
const [ref, hovering] = useHover(() => console.log('callback'));
// or
const [ref, hovering] = useHover(options);

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to be hovered
callback?	(event: Event) => void	-	The callback function to be invoked on mouse enter

Returns

boolean

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to be hovered
options.onEntry?	(event: Event) => void	-	The callback function to be invoked on mouse enter
options.onLeave?	(event: Event) => void	-	The callback function to be invoked on mouse leave

Returns

boolean

Parameters

Name	Type	Default	Note
callback?	(event: Event) => void	-	The callback function to be invoked on mouse enter

Returns

{ ref: StateRef<Target> } & UseHoverReturn

Parameters

Name	Type	Default	Note
options.onEntry?	(event: Event) => void	-	The callback function to be invoked on mouse enter
options.onLeave?	(event: Event) => void	-	The callback function to be invoked on mouse leave

Returns

{ ref: StateRef<Target> } & UseHoverReturn

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseHoverOptions {
  /** The enabled state of the hook */
  enabled?: boolean;
  /** The on entry callback */
  onEntry?: (event: Event) => void;
  /** The on leave callback */
  onLeave?: (event: Event) => void;
}

export interface UseHoverReturn {
  value: boolean;
}

export interface UseHover {
  (target: HookTarget, callback?: (event: Event) => void): boolean;

  (target: HookTarget, options?: UseHoverOptions): boolean;

  <Target extends Element>(
    callback?: (event: Event) => void,
    target?: never
  ): {
    ref: StateRef<Target>;
  } & UseHoverReturn;

  <Target extends Element>(
    options?: UseHoverOptions,
    target?: never
  ): {
    ref: StateRef<Target>;
  } & UseHoverReturn;
}

Source

Source • Demo

Contributors

D

debabin

S

str0yka

H

hywax