useHover

Track whether the pointer is over an element.

useHover returns a ref and a boolean that is true while the pointer is over the element the ref is attached to.

Pro planHover to see what's included

Import#

typescript

import { useHover } from "@reactberry/system";

Usage#

typescript

"use client";

import { useHover } from "@reactberry/system";
import { Box, Text } from "@reactberry/system/elements";

export default function HoverCard() {
  const [ref, isHovered] = useHover<HTMLDivElement>();

  return (
    <Box ref={ref} p="m" skin={isHovered ? "brand.subtle" : "surface"} shape="rounded">
      <Text>{isHovered ? "Hovering" : "Hover me"}</Text>
    </Box>
  );
}

Examples#

Row actions#

Call the hook in each row component to show actions for the hovered row only. The actions also show on focus-within, so keyboard users can reach them.

Q3 report.pdf2.4 MB

Brand guidelines.fig18 MB

Invoices.csv96 KB

API#

typescript

function useHover<T extends HTMLElement = HTMLDivElement>(): [MutableRefObject<T | null>, boolean]

Parameters#

None. Pass the element type as a type argument, for example useHover<HTMLButtonElement>().

Returns#

A tuple:

Prop	Type	Default	Description
`ref`	`MutableRefObject<T \| null>`	—	Attach to the element to watch.
`isHovered`	`boolean`	—	Follows the element's `mouseenter` and `mouseleave` events.

Accessibility#

Only mouseenter and mouseleave are tracked. Keyboard focus does not set isHovered, so don't make content reachable on hover only.

Notes#

Listeners are attached once, on mount. The element must be rendered when the component mounts and must not be swapped for another element later.
This hook was previously also exported from @reactberry/system/blocks (as part of Steps). From 2.1.0-beta.3 it is only exported from the package root.