Open-code aq-ui React hook for Use Roving Focus.
aq-uipnpm dlx aq-ui@alpha add use-roving-focusImport the parts you need, then jump to an export for its contract.
"use client"
import { useRovingFocus } from "@/hooks/use-roving-focus"Type contract for RovingFocusControls.
interface RovingFocusControls<T extends HTMLElement>| Name | Type |
|---|---|
activeIndex | number |
setActiveIndex | (index: number) => void |
focusIndex | (index: number) => void |
getItemProps | (index: number) => RovingFocusItemProps<T> |
Type contract for RovingFocusItemProps.
interface RovingFocusItemProps<T extends HTMLElement>| Name | Type |
|---|---|
ref | (element: T | null) => void |
tabIndex | 0 | -1 |
onFocus | () => void |
onKeyDown | React.KeyboardEventHandler<T> |
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>RovingFocusControls<T>| Name | Type |
|---|---|
options | UseRovingFocusOptions |
Type contract for UseRovingFocusOptions.
interface UseRovingFocusOptions| Name | Type | Default |
|---|---|---|
itemCount | number | — |
activeIndex? | number | — |
defaultActiveIndex? | number | 0 |
onActiveIndexChange? | (index: number) => void | — |
orientation? | "horizontal" | "vertical" | "both" | "both" |
direction? | "ltr" | "rtl" | "ltr" |
loop? | boolean | true |
disabledIndices? | Iterable<number> | [] |
use-controllable-state