@react-aria/interactions

  • Version 3.11.0
  • Published
  • 522 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 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>