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
Name | Type | Default | Description |
---|---|---|---|
options | object | - | The options object |
options.preventScroll | boolean | true | Prevent the default behavior of the arrow keys to scroll the page. The default value is true. |
options.disableWebListeners | boolean | false | Disable the web listeners. The default value is false. |
options.adapter | object | 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. |
options.initialFocusElement | string | null | The element to be focused when the elements has been registered. The default value is null. |
options.registerCooldown | number | 500 | The cooldown time to register the elements. The default value is 500. |
options.debug | boolean | false | Enable the debug mode. The default value is false. |
options.errorOnReinit | boolean | false | Throw 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);