A React hook for tracking user interaction with the DOM elements, combining 🖱 mouse events and ⌨️ keyboard focus

Last update: May 9, 2022

useHoverState()

The one aware of keyboard navigation as well 😉

Bundlephobia Types MIT License

npm i use-hover-state

A React hook for tracking user interaction with the DOM elements, combining 🖱 mouse events and ⌨️ keyboard focus

Quick Start

import * as React from 'react';
import { useHoverState } from 'use-hover-state';

const Component = (props) => {
  const [isHovering, hoverState] = useHoverState();
  return <div {...hoverState}>{isHovering ? 'Hovering' : 'Not hovering'}</div>;
};

API

useHoverState(options?)

Returns [boolean, spreadProps]

This hook returns a tuple with the:

  • boolean isHovered state, representing current active state of an element
  • object spreadProps, which one should spread on the given element
  • object realState, which one can use to distinguish mouse and keyboard activity

HoverOptions

Property Type Description
enterDelay number Delays setting isHovering to true for this amount in ms
leaveDelay number Delays setting isHovering to false for htis amount in ms

You almost certainty need to set leaveDelay to a non zero value

supportsHover

A hover feature detector

import { supportsHover } from 'react-hover-state';

switch (supportsHover()) {
  case true:
    'yes';
  case false:
    'no';
  default:
    'this is server';
}

See also

LICENSE

MIT

GitHub

https://github.com/thearnica/use-hover-state
You might also like...

Happy events website built with react

Happy events live website link: https://assignment-11-holiday-planner.web.app/ Features: 1. A holiday event booking website which offers different eve

Nov 22, 2021

React-Scrollbar-Size is a React hook designed to calculate the size of the user agent's horizontal and vertical scrollbars.

React-Scrollbar-Size is a React hook designed to calculate the size of the user agent's horizontal and vertical scrollbars. It will also detect when the size of the scrollbars change, such as when the user agent's zoom factor changes.

Mar 3, 2022

React Hook for reading from and writing to the user's clipboard.

useClippy useClippy is a TypeScript-friendly React hook for reading from and writing to the user's clipboard. Not to be confused with Microsoft Office

Apr 28, 2022

🎙 A simple React hook for detecting the use of an Ad Blocker by the user. Built-in TS support.

useDetectAdBlocker 🎙 A simple React hook for detecting the use of an Ad Blocker by the user. Built with TypeScript (built-in type safety and support)

Dec 23, 2021

A hook-based multistep wizard library with vast control over the logic of the user as per use-case.

A hook-based multistep wizard library with vast control over the logic of the user as per use-case.

A hooks-based multistep wizard (what I call it a machine 😻 ) built for React which is flexible and easy to use. Huge shout out to jcmcneal for the Re

Feb 8, 2022

Keep-react-hook-form - A lib to store react-hook-form values in session storage

Keep-react-hook-form - A lib to store react-hook-form values in session storage

Jan 27, 2022

Create multiple stores with providers and get the store and dispatch hook for free with type safety!

React Store maker Create multiple stores with providers and get the store and dispatch hook for free with type safety! How to use it Install npm insta

Apr 20, 2022

React hook to handle any async operation in React components, and prevent race conditions

React-async-hook This library only does one small thing, and does it well. Don't expect it to grow in size, because it is feature complete: Handle fet

May 14, 2022

Viewport units (vw, vh, vmin, vmax) + useUnits hook for React, React Native and Expo

Viewport units (vw, vh, vmin, vmax) + useUnits hook for React, React Native and Expo

Viewport units (vw, vh, vmin, vmax) + useUnits hook for React, React Native and Expo.

May 2, 2022
React Hooks to listen to both mouse down or up and click events with a once called function

use-mouse-action React Hooks to listen to both mouse down or up and click events with a once called function. Example This hook can be used to create

Feb 4, 2022
React hook for combining double-click function into click event, as well as repeatable double-click

useDoubleClick React hook for continuous double-clicks and combining click and double-click events See Repeatable double-click and hybrid clicks solut

Feb 13, 2022
A React hook that animates the document title and/or favicon when focus from the page is lost.
A React hook that animates the document title and/or favicon when focus from the page is lost.

A React hook that animates the document title and/or favicon when focus from the page is lost.

Apr 28, 2022
React hook for using keyboard shortcuts in components.

react-hotkeys-hook React hook for using keyboard shortcuts in components. This is a hook version for the hotkeys package. Documentation and live examp

May 15, 2022
A custom React Hook for implementing a calendar with events
A custom React Hook for implementing a calendar with events

react-use-calendar Custom React Hook for implementing a calendar with events Installation npm install react-use-calendar --save Demo Usage import Rea

Feb 20, 2022
React hook to detect click or touch events outside an element.

React hook to detect click or touch events React hook useClickAway() that reacts to clicks outside the bound element, and calls the expression that is

Apr 16, 2022
State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.

React Tracked State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others. Documentation site: htt

May 17, 2022
A React hook to detect click outside of the target(s) elements

React Hook useClickOutside This is a React hook to detect click outside of the t

Dec 21, 2021
A React component that decorates its children with mouse and touch coordinates relative to itself.

react-cursor-position react-cursor-position is a primitive component for composing UI features that require notification of cursor or touch position c

Apr 17, 2022
A library for emitting and listening to events in a React application.

react-event-hook A library for emitting and listening to events in a React application. The idea for this package came from a Tweet by @pedronauck. In

May 1, 2022