Events

Learn how to use events in Arrow Navigation and get started with spatial navigation.

Arrow Navigation provides a set of events that you can use to listen to navigation changes and handle them in your application. You can use these events to implement custom behavior based on the navigation state.

Example

import { ArrowNavigationEvents, getArrowNavigation } from '@arrow-navigation/core'

const navigationApi = getArrowNavigation()

const handleCurrentElementChange = (element, direction) => {
  console.log('Current element changed', element, direction)
}

// Add an event listener
navigationApi.on(ArrowNavigationEvents.CURRENT_ELEMENT_CHANGE, handleCurrentElementChange)

// Remove the event listener
navigationApi.off(ArrowNavigationEvents.CURRENT_ELEMENT_CHANGE, handleCurrentElementChange)

Events

The API implements an Event Emitter to listen to events. The events are accessible through the on and off methods. All the events can be accesed through the ArrowNavigationEvents enum.

current-element:change

This event is triggered when the current element is changed.

Parameters

NameTypeDescription
elementElementThe new element.
directionDirectionThe direction of the change.

current-group:change

This event is triggered when the current group is changed.

Parameters

NameTypeDescription
groupGroupThe new group.
directionDirectionThe direction of the change.

element:focus

This event is triggered when an element is focused.

Parameters

NameTypeDescription
currentElementThe currently focused element.
directionDirectionThe direction of the focus.
prevElementThe previously focused element.

element:blur

This event is triggered when an element is blurred.

Parameters

NameTypeDescription
currentElementThe currently blurred element.
directionDirectionThe direction of the blur.
nextElementThe next element to be focused.

group:focus

This event is triggered when a group is focused.

Parameters

NameTypeDescription
currentGroupThe currently focused group.
directionDirectionThe direction of the focus.
prevGroupThe previously focused group.

group:blur

This event is triggered when a group is blurred.

Parameters

NameTypeDescription
currentGroupThe currently blurred group.
directionDirectionThe direction of the blur.
nextGroupThe next group to be focused.

groups:change

This event is triggered when the groups are changed.

Parameters

NameTypeDescription
groupsGroup[]The new groups.

elements:change

This event is triggered when the elements are changed.

Parameters

NameTypeDescription
elementsElement[]The new elements.

groups-config:change

This event is triggered when the groups configuration is changed.

Parameters

NameTypeDescription
groupsConfigGroupsConfigThe new groups configuration.

elements:register-end

This event is triggered when the elements are registered.

Parameters

This event does not receive any parameters.