Skip to main content

usePress

usePress is a custom React hook that tracks whether an element is currently being pressed, via mouse or touch.

Usage​

import { usePress } from "hookify-react";

export default function UsePressExample() {
  const { ref, isPressed } = usePress<HTMLButtonElement>();

  return (
    <button ref={ref} style={{ padding: "10px", fontSize: "16px" }}>
      {isPressed ? "Wow that feels good! 😁" : "Please press me! 😥"}
    </button>
  );
}

API Reference​

Parameters​

This hook does not take any parameters. The element type can be supplied as a generic, e.g. usePress<HTMLButtonElement>().

Return Value​

usePress returns an object with the following properties:

PropertyTypeDescription
refReact.MutableRefObject<T | null>A ref to attach to the target element.
isPressedbooleantrue while the element is being pressed, otherwise false.

Behavior​

  • Supports both mouse and touch input.
  • Press starts on the element itself (mousedown / touchstart).
  • Release is tracked on window (mouseup / touchend), so lifting the pointer anywhere clears the pressed state.
  • Also releases when the pointer leaves the element while held (mouseleave).
  • Cleans up listeners automatically when the component unmounts.