Wondering what’s next for npm?Check out our public roadmap! »

    @react-hook/hover
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    useHover()

    Bundlephobia Types NPM Version MIT License

    npm i @react-hook/hover

    A React hook for tracking the hover state of DOM elements in browsers where hovering is possible. If the browser does not support hover states (e.g. a phone) the isHovering value will always be false.

    Quick Start

    Check out the example on CodeSandbox

    import * as React from 'react'
    import useHover from '@react-hook/hover'
     
    const Component = (props) => {
      const target = React.useRef(null)
      const isHovering = useHover(target, {enterDelay: 200, leaveDelay: 200})
      return <div ref={target}>{isHovering ? 'Hovering' : 'Not hovering'}</div>
    }

    API

    useHover(target, options?)

    function useHover<T extends HTMLElement>(
      target: React.RefObject<T> | T | null,
      options: UseHoverOptions = {}
    ): boolean

    Arguments

    Argument Type Required? Description
    target React.RefObject | T | null Yes A React ref created by useRef() or an HTML element
    options UseHoverOptions Yes Configuration options for the hook. See UseHoverOptions below.

    Returns boolean

    This hook returns true if the element in ref is in a hover state, otherwise false. This value is always false on devices that don't have hover states, i.e. phones.

    UseHoverOptions

    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

    LICENSE

    MIT

    Install

    npm i @react-hook/hover

    DownloadsWeekly Downloads

    2,152

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    23.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar