@react-aria/interactions

  • Version 3.8.4
  • Published
  • 510 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 HoverProps

        interface HoverProps extends HoverEvents {}

          property isDisabled

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

          interface KeyboardProps

          interface KeyboardProps extends KeyboardEvents {}

            property isDisabled

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

            interface PressHookProps

            interface PressHookProps extends PressProps {}

              property ref

              ref?: RefObject<HTMLElement>;
              • 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: HTMLAttributes<HTMLElement>;
                  • Props to spread on the target element.

                  interface ScrollWheelProps

                  interface ScrollWheelProps extends ScrollEvents {}

                    property isDisabled

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

                    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>