@react-aria/interactions

  • Version 3.13.1
  • Published
  • 514 kB
  • 3 dependencies
  • Apache-2.0 license

Install

npm i @react-aria/interactions
yarn add @react-aria/interactions
pnpm add @react-aria/interactions

Overview

Spectrum UI components in React

Index

Functions

function getInteractionModality

getInteractionModality: () => Modality;

    function isFocusVisible

    isFocusVisible: () => boolean;
    • If true, keyboard focus is visible.

    function setInteractionModality

    setInteractionModality: (modality: Modality) => void;

      function useFocus

      useFocus: (props: FocusProps) => FocusResult;
      • 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;
      • 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;

        Interfaces

        interface FocusProps

        interface FocusProps extends FocusEvents {}

          property isDisabled

          isDisabled?: boolean;
          • Whether the focus events should be disabled.

          interface FocusResult

          interface FocusResult {}

            property focusProps

            focusProps: DOMAttributes;
            • Props to spread onto the target element.

            interface FocusVisibleProps

            interface FocusVisibleProps {}

              property autoFocus

              autoFocus?: boolean;
              • Whether the element will be auto focused.

              property isTextInput

              isTextInput?: boolean;
              • Whether the element is a text input.

              interface FocusVisibleResult

              interface FocusVisibleResult {}

                property isFocusVisible

                isFocusVisible: boolean;
                • Whether keyboard focus is visible globally.

                interface FocusWithinProps

                interface FocusWithinProps {}

                  property isDisabled

                  isDisabled?: boolean;
                  • Whether the focus within events should be disabled.

                  property onBlurWithin

                  onBlurWithin?: (e: FocusEvent) => void;
                  • Handler that is called when the target element and all descendants lose focus.

                  property onFocusWithin

                  onFocusWithin?: (e: FocusEvent) => void;
                  • Handler that is called when the target element or a descendant receives focus.

                  property onFocusWithinChange

                  onFocusWithinChange?: (isFocusWithin: boolean) => void;
                  • Handler that is called when the the focus within state changes.

                  interface FocusWithinResult

                  interface FocusWithinResult {}

                    property focusWithinProps

                    focusWithinProps: DOMAttributes;
                    • Props to spread onto the target element.

                    interface HoverProps

                    interface HoverProps extends HoverEvents {}

                      property isDisabled

                      isDisabled?: boolean;
                      • Whether the hover events should be disabled.

                      interface HoverResult

                      interface HoverResult {}

                        property hoverProps

                        hoverProps: DOMAttributes;
                        • Props to spread on the target element.

                        property isHovered

                        isHovered: boolean;

                          interface InteractOutsideProps

                          interface InteractOutsideProps {}

                            property isDisabled

                            isDisabled?: boolean;
                            • Whether the interact outside events should be disabled.

                            property onInteractOutside

                            onInteractOutside?: (e: SyntheticEvent) => void;

                              property onInteractOutsideStart

                              onInteractOutsideStart?: (e: SyntheticEvent) => void;

                                property ref

                                ref: RefObject<Element>;

                                  interface KeyboardProps

                                  interface KeyboardProps extends KeyboardEvents {}

                                    property isDisabled

                                    isDisabled?: boolean;
                                    • Whether the keyboard events should be disabled.

                                    interface KeyboardResult

                                    interface KeyboardResult {}

                                      property keyboardProps

                                      keyboardProps: DOMAttributes;
                                      • Props to spread onto the target element.

                                      interface LongPressProps

                                      interface LongPressProps {}

                                        property accessibilityDescription

                                        accessibilityDescription?: string;
                                        • A description for assistive techology users indicating that a long press action is available, e.g. "Long press to open menu".

                                        property isDisabled

                                        isDisabled?: boolean;
                                        • Whether long press events should be disabled.

                                        property onLongPress

                                        onLongPress?: (e: LongPressEvent) => void;
                                        • Handler that is called when the threshold time is met while the press is over the target.

                                        property onLongPressEnd

                                        onLongPressEnd?: (e: LongPressEvent) => void;
                                        • Handler that is called when a long press interaction ends, either over the target or when the pointer leaves the target.

                                        property onLongPressStart

                                        onLongPressStart?: (e: LongPressEvent) => void;
                                        • Handler that is called when a long press interaction starts.

                                        property threshold

                                        threshold?: number;
                                        • The amount of time in milliseconds to wait before triggering a long press. 500ms

                                        interface LongPressResult

                                        interface LongPressResult {}

                                          property longPressProps

                                          longPressProps: DOMAttributes;
                                          • Props to spread on the target element.

                                          interface MoveResult

                                          interface MoveResult {}

                                            property moveProps

                                            moveProps: DOMAttributes;
                                            • Props to spread on the target element.

                                            interface PressHookProps

                                            interface PressHookProps extends PressProps {}

                                              property ref

                                              ref?: RefObject<Element>;
                                              • A ref to the target element.

                                              interface PressProps

                                              interface PressProps extends PressEvents {}

                                                property allowTextSelectionOnPress

                                                allowTextSelectionOnPress?: boolean;
                                                • Whether text selection should be enabled on the pressable element.

                                                property isDisabled

                                                isDisabled?: boolean;
                                                • Whether the press events should be disabled.

                                                property isPressed

                                                isPressed?: boolean;
                                                • Whether the target is in a controlled press state (e.g. an overlay it triggers is open).

                                                property preventFocusOnPress

                                                preventFocusOnPress?: boolean;
                                                • Whether the target should not receive focus on press.

                                                property shouldCancelOnPointerExit

                                                shouldCancelOnPointerExit?: boolean;
                                                • Whether press events should be canceled when the pointer leaves the target while pressed. By default, this is false, which means if the pointer returns back over the target while still pressed, onPressStart will be fired again. If set to true, the press is canceled when the pointer leaves the target and onPressStart will not be fired if the pointer returns.

                                                interface PressResult

                                                interface PressResult {}

                                                  property isPressed

                                                  isPressed: boolean;
                                                  • Whether the target is currently pressed.

                                                  property pressProps

                                                  pressProps: DOMAttributes;
                                                  • Props to spread on the target element.

                                                  interface ScrollWheelProps

                                                  interface ScrollWheelProps extends ScrollEvents {}

                                                    property isDisabled

                                                    isDisabled?: boolean;
                                                    • Whether the scroll listener should be disabled.

                                                    Type Aliases

                                                    type FocusVisibleHandler

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

                                                      type Modality

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

                                                        Package Files (11)

                                                        Dependencies (3)

                                                        Dev Dependencies (0)

                                                        No dev dependencies.

                                                        Peer Dependencies (1)

                                                        Badge

                                                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-aria/interactions.

                                                        • Markdown
                                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@react-aria/interactions)
                                                        • HTML
                                                          <a href="https://www.jsdocs.io/package/@react-aria/interactions"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>