Skip to content
aq-ui
Back to HooksHook

Use Roving Focus

Open-code aq-ui React hook for Use Roving Focus.

Installation

pnpm dlx aq-ui@alpha add use-roving-focus

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { useRovingFocus } from "@/hooks/use-roving-focus"

RovingFocusControls

interfaceSource L25

Type contract for RovingFocusControls.

interface RovingFocusControls<T extends HTMLElement>

Members

NameType
activeIndexnumber
setActiveIndex(index: number) => void
focusIndex(index: number) => void
getItemProps(index: number) => RovingFocusItemProps<T>

RovingFocusItemProps

interfaceSource L18

Type contract for RovingFocusItemProps.

interface RovingFocusItemProps<T extends HTMLElement>

Members

NameType
ref(element: T | null) => void
tabIndex0 | -1
onFocus() => void
onKeyDownReact.KeyboardEventHandler<T>

useRovingFocus

functionSource L32

Open-code aq-ui React hook for Use Roving Focus.

function useRovingFocus<T extends HTMLElement>({ itemCount, activeIndex, defaultActiveIndex = 0, onActiveIndexChange, orientation = "both", direction = "ltr", loop = true, disabledIndices = [], }: UseRovingFocusOptions): RovingFocusControls<T>
Returns
RovingFocusControls<T>

Parameters

NameType
optionsUseRovingFocusOptions

UseRovingFocusOptions

interfaceSource L7

Type contract for UseRovingFocusOptions.

interface UseRovingFocusOptions

Members

NameTypeDefault
itemCountnumber—
activeIndex?number—
defaultActiveIndex?number0
onActiveIndexChange?(index: number) => void—
orientation?"horizontal" | "vertical" | "both""both"
direction?"ltr" | "rtl""ltr"
loop?booleantrue
disabledIndices?Iterable<number>[]

Registry dependencies

use-controllable-state

Files

  • hooks/use-roving-focus.ts

Source