@react-aria/interactions

Functions

• addWindowFocusTracking()
• getInteractionModality()
• isFocusVisible()
• setInteractionModality()
• useFocus()
• useFocusVisible()
• useFocusVisibleListener()
• useFocusWithin()
• useHover()
• useInteractionModality()
• useInteractOutside()
• useKeyboard()
• useLongPress()
• useMove()
• usePress()
• useScrollWheel()

Interfaces

• FocusProps

  • isDisabled
• FocusResult

  • focusProps
• FocusVisibleProps

  • autoFocus
  • isTextInput
• FocusVisibleResult

  • isFocusVisible
• FocusWithinProps

  • isDisabled
  • onBlurWithin
  • onFocusWithin
  • onFocusWithinChange
• FocusWithinResult

  • focusWithinProps
• HoverProps

  • isDisabled
• HoverResult

  • hoverProps
  • isHovered
• InteractOutsideProps

  • isDisabled
  • onInteractOutside
  • onInteractOutsideStart
  • ref
• KeyboardProps

  • isDisabled
• KeyboardResult

  • keyboardProps
• LongPressProps

  • accessibilityDescription
  • isDisabled
  • onLongPress
  • onLongPressEnd
  • onLongPressStart
  • threshold
• LongPressResult

  • longPressProps
• MoveResult

  • moveProps
• PressHookProps

  • ref
• PressProps

  • allowTextSelectionOnPress
  • isDisabled
  • isPressed
  • preventFocusOnPress
  • shouldCancelOnPointerExit
• PressResult

  • isPressed
  • pressProps
• ScrollWheelProps

  • isDisabled

Type Aliases

• FocusVisibleHandler
• Modality

function addWindowFocusTracking

addWindowFocusTracking: (element?: HTMLElement | null) => () => void;

• EXPERIMENTAL Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.

  Sometimes apps render portions of their tree into an iframe. In this case, we cannot accurately track if the focus is visible because we cannot see interactions inside the iframe. If you have this in your application's architecture, then this function will attach event listeners inside the iframe. You should call addWindowFocusTracking with an element from inside the window you wish to add. We'll retrieve the relevant elements based on that. Note, you do not need to call this for the default window, as we call it for you.

  When you are ready to stop listening, but you do not wish to unmount the iframe, you may call the cleanup function returned by addWindowFocusTracking. Otherwise, when you unmount the iframe, all listeners and state will be cleaned up automatically for you.

  Parameter element

  document.body - The element provided will be used to get the window to add.

  Returns

  A function to remove the event listeners and cleanup the state.

function getInteractionModality

getInteractionModality: () => Modality | null;

function isFocusVisible

isFocusVisible: () => boolean;

• If true, keyboard focus is visible.

function setInteractionModality

setInteractionModality: (modality: Modality) => void;

function useFocus

useFocus: <Target extends FocusableElement = FocusableElement>(
    props: FocusProps<Target>
) => FocusResult<Target>;

• Handles focus events for the immediate target. Focus events on child elements will be ignored.

function useFocusVisible

useFocusVisible: (props?: FocusVisibleProps) => FocusVisibleResult;

• Manages focus visible state for the page, and subscribes individual components for updates.

function useFocusVisibleListener

useFocusVisibleListener: (
    fn: FocusVisibleHandler,
    deps: ReadonlyArray<any>,
    opts?: { isTextInput?: boolean }
) => void;

• Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).

function useFocusWithin

useFocusWithin: (props: FocusWithinProps) => FocusWithinResult;

• Handles focus events for the target and its descendants.

function useHover

useHover: (props: HoverProps) => HoverResult;

• Handles pointer hover interactions for an element. Normalizes behavior across browsers and platforms, and ignores emulated mouse events on touch devices.

function useInteractionModality

useInteractionModality: () => Modality | null;

• Keeps state of the current modality.

function useInteractOutside

useInteractOutside: (props: InteractOutsideProps) => void;

• Example, used in components like Dialogs and Popovers so they can close when a user clicks outside them.

function useKeyboard

useKeyboard: (props: KeyboardProps) => KeyboardResult;

• Handles keyboard interactions for a focusable element.

function useLongPress

useLongPress: (props: LongPressProps) => LongPressResult;

• Handles long press interactions across mouse and touch devices. Supports a customizable time threshold, accessibility description, and normalizes behavior across browsers and devices.

function useMove

useMove: (props: MoveEvents) => MoveResult;

• Handles move interactions across mouse, touch, and keyboard, including dragging with the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and platforms, and ignores emulated mouse events on touch devices.

function usePress

usePress: (props: PressHookProps) => PressResult;

• Handles press interactions across mouse, touch, keyboard, and screen readers. It normalizes behavior across browsers and platforms, and handles many nuances of dealing with pointer and keyboard events.

function useScrollWheel

useScrollWheel: (props: ScrollWheelProps, ref: RefObject<HTMLElement>) => void;

type FocusVisibleHandler

type FocusVisibleHandler = (isFocusVisible: boolean) => void;

type Modality

type Modality = 'keyboard' | 'pointer' | 'virtual';