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
| Name | Type | Description |
|---|---|---|
| element | Element | The new element. |
| direction | Direction | The direction of the change. |
current-group:change
This event is triggered when the current group is changed.
Parameters
| Name | Type | Description |
|---|---|---|
| group | Group | The new group. |
| direction | Direction | The direction of the change. |
element:focus
This event is triggered when an element is focused.
Parameters
| Name | Type | Description |
|---|---|---|
| current | Element | The currently focused element. |
| direction | Direction | The direction of the focus. |
| prev | Element | The previously focused element. |
element:blur
This event is triggered when an element is blurred.
Parameters
| Name | Type | Description |
|---|---|---|
| current | Element | The currently blurred element. |
| direction | Direction | The direction of the blur. |
| next | Element | The next element to be focused. |
group:focus
This event is triggered when a group is focused.
Parameters
| Name | Type | Description |
|---|---|---|
| current | Group | The currently focused group. |
| direction | Direction | The direction of the focus. |
| prev | Group | The previously focused group. |
group:blur
This event is triggered when a group is blurred.
Parameters
| Name | Type | Description |
|---|---|---|
| current | Group | The currently blurred group. |
| direction | Direction | The direction of the blur. |
| next | Group | The next group to be focused. |
groups:change
This event is triggered when the groups are changed.
Parameters
| Name | Type | Description |
|---|---|---|
| groups | Group[] | The new groups. |
elements:change
This event is triggered when the elements are changed.
Parameters
| Name | Type | Description |
|---|---|---|
| elements | Element[] | The new elements. |
groups-config:change
This event is triggered when the groups configuration is changed.
Parameters
| Name | Type | Description |
|---|---|---|
| groupsConfig | GroupsConfig | The new groups configuration. |
elements:register-end
This event is triggered when the elements are registered.
Parameters
This event does not receive any parameters.