Interface ArrowKeysNavigationProps

Props of the useArrowKeysNavigation hook.

interface ArrowKeysNavigationProps {
    approveFocusCandidate?: ((element: FocusableElement) => boolean);
    focusCycle?: readonly FocusCycle[];
    isDisabled?: boolean;
    isRTL?: boolean;
    isScrollPrevented?: boolean;
    orientation?: "vertical" | "horizontal" | "auto";
    pagingBehavior?: "focus" | "prevent" | "none";
    sortFocusCandidates?: ((a: FocusableElement, b: FocusableElement) => number);
}

Hierarchy (view full)

Properties

approveFocusCandidate? focusCycle? isDisabled? isRTL? isScrollPrevented? orientation? pagingBehavior? sortFocusCandidates?

Properties

OptionalapproveFocusCandidate

approveFocusCandidate?: ((element: FocusableElement) => boolean)

Returns true if an element is allowed to receive focus. By default, all candidates are approved.

See

OptionalfocusCycle

focusCycle?: readonly FocusCycle[]

The ordered list of focus cycling modifiers.

By default, no focus cycling is done.

OptionalisDisabled

isDisabled?: boolean

If true then arrow navigation is disabled.

Default

false

OptionalisRTL

isRTL?: boolean

If true then ArrowLeft and ArrowRight behavior is mirrored when focus is cycled.

By default, RTL is derived a document.

OptionalisScrollPrevented

isScrollPrevented?: boolean

If true no scrolling will occur after element receives focus, otherwise the browser scrolls the document to bring the newly-focused element into view.

Default

false

Optionalorientation

orientation?: "vertical" | "horizontal" | "auto"

Navigation orientation:

"vertical"
Only up and down navigation is enabled.
"horizontal"
Only left and right navigation is enabled.
"auto"
Navigation in any direction is enabled.

Default

"auto"

OptionalpagingBehavior

pagingBehavior?: "focus" | "prevent" | "none"

PageUp and PageDown keys behavior:

"focus"
Move focus to the first or last element. If focus cycling is enabled it is also applied.
"prevent"
Paging events are prevented.
"none"
Paging events are ignored and default browser behavior may take place.

Default

"none"

OptionalsortFocusCandidates

sortFocusCandidates?: ((a: FocusableElement, b: FocusableElement) => number)

Sorts elements that are candidates to be focused. By default, elements are sorted in a document order.

See

Settings

Member Visibility

On This Page

Properties
MMNEPVFCICPMFPCPTTAAATR