initArrowNavigation - React API

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

initArrowNavigation

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

Important:

You need to import this function from the @arrow-navigation/react package, not from the @arrow-navigation/core package. If you initialize the arrow navigation using the @arrow-navigation/core package, the arrow navigation will not work as expected because you wont using the correct instance of the arrow navigation.

Syntax

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

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 API.

Example

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { initArrowNavigation } from "@arrow-navigation/react";

const rootElement = document.getElementById("root")!;

initArrowNavigation();

ReactDOM.render(<App />, rootElement);