Logo for jsDocs.io

@react-aria/focus

  • Version 3.19.0
  • Published
  • 395 kB
  • 5 dependencies
  • Apache-2.0 license

Install

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

Overview

Spectrum UI components in React

Index

Functions

Interfaces

Functions

function focusSafely

focusSafely: (element: FocusableElement) => void;

  • A utility function that focuses an element while avoiding undesired side effects such as page scrolling and screen reader issues with CSS transitions.

function useFocusRing

useFocusRing: (props?: AriaFocusRingProps) => FocusRingAria;

  • Determines whether a focus ring should be shown to indicate keyboard focus. Focus rings are visible only when the user is interacting with a keyboard, not with a mouse, touch, or other input methods.

function useHasTabbableChild

useHasTabbableChild: (
    ref: RefObject<Element>,
    options?: AriaHasTabbableChildOptions
) => boolean;

  • Returns whether an element has a tabbable child, and updates as children change.

Interfaces

interface AriaFocusRingProps

interface AriaFocusRingProps {}

    property autoFocus

    autoFocus?: boolean;

    • Whether the element will be auto focused.

    property isTextInput

    isTextInput?: boolean;

    • Whether the element is a text input.

    property within

    within?: boolean;

    • Whether to show the focus ring when something inside the container element has focus (true), or only if the container itself has focus (false). 'false'

    interface FocusRingAria

    interface FocusRingAria {}

      property focusProps

      focusProps: DOMAttributes;

      • Props to apply to the container element with the focus ring.

      property isFocused

      isFocused: boolean;

      • Whether the element is currently focused.

      property isFocusVisible

      isFocusVisible: boolean;

      • Whether keyboard focus should be visible.

      Package Files (4)

      Dependencies (5)

      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/focus.

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