initArrowNavigation - Core API

Learn how to use Arrow Navigation Core library in your project and get started with spatial navigation.

Initializes the arrow navigation. This function should be called only once in your application.

Important:

If you are using React for your project, please refer to the Quick Start Guide for Arrow Navigation React library. The react library provides a set of components and hooks to implement spatial navigation in your web app easily.

Syntax

import { initArrowNavigation } from '@arrow-navigation/core'

initArrowNavigation({
  preventScroll: true // Prevent the default behavior of the arrow keys to scroll the page. The default value is true,
  disableWebListeners: false, // Disable the web listeners. The default value is false
  adapter: webAdapter, // The adapter to use. The default value is webAdapter included in the package. You can create your own adapter to use the module in other platforms like React Native.
  initialFocusElement: 'element-0-0' // The element to be focused when the elements has been registered. The default value is null
})

Parameters

NameTypeDefaultDescription
optionsobject-The options object
options.preventScrollbooleantruePrevent the default behavior of the arrow keys to scroll the page. The default value is true.
options.disableWebListenersbooleanfalseDisable the web listeners. The default value is false.
options.adapterobjectwebAdapterThe adapter to use. The default value is webAdapter included in the package. You can create your own adapter to use the module in other platforms like React Native.
options.initialFocusElementstringnullThe element to be focused when the elements has been registered. The default value is null.
options.registerCooldownnumber500The cooldown time to register the elements. The default value is 500.
options.debugbooleanfalseEnable the debug mode. The default value is false.
options.errorOnReinitbooleanfalseThrow an error when the arrow navigation is reinitialized. The default value is false.

Returns

  • ArrowNavigationInstace: An object with the arrow navigation api. For more information, refer to the Arrow Navigation Instance.

Example

import { initArrowNavigation } from '@arrow-navigation/core'

initArrowNavigation({ debug: true })