@react-aria/interactions

usePress

Handles all aspects of press interactions across mouse, touch, and keyboard interactions, ensuring a consistent behavior.

import {usePress} from '@react-aria/interactions';
function MyButton(props) {
  let {pressProps} = usePress({
    onPress: () => console.log('Button pressed')
  });
  return <button {...pressProps}>Press me</button>;
}

useHover

Enables handling hover interactions, providing callbacks for hover start and end, which helps in managing hover states effectively.

import {useHover} from '@react-aria/interactions';
function MyComponent(props) {
  let {hoverProps, isHovered} = useHover({
    onHoverStart: () => console.log('Hover started'),
    onHoverEnd: () => console.log('Hover ended')
  });
  return <div {...hoverProps}>{isHovered ? 'Hovering' : 'Not hovering'}</div>;
}

useFocus

Manages focus events and states, providing a consistent and accessible experience across different input methods.

import {useFocus} from '@react-aria/interactions';
function MyInput(props) {
  let {focusProps} = useFocus({
    onFocusChange: isFocused => console.log(isFocused ? 'Focused' : 'Blurred')
  });
  return <input {...focusProps} placeholder='Focus on me' />;
}