useListenLastElementReached
Hook to listen when the last element of a group is reached and trigger a callback function.
Usage
import { useListenLastElementReached } from '@arrow-navigation/react'
const App = () => {
useListenLastElementReached(() => {
console.log('Last element reached')
}, 'right')
return (
<div>
<FocusableGroup id="group-1">
<FocusableElement id="btn-1">
Button 1
</FocusableElement>
<FocusableElement id="btn-2">
Button 2
</FocusableElement>
</FocusableGroup>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
Parameters
Name | Type | Default | Description |
---|---|---|---|
callback | function | - | Callback function to be called when the last element of a group receives focus |
direction | string | - | The direction to navigate when the last element of a group receives focus. Possible values are: 'up', 'down', 'left' and 'right' |
options | object | - | The options for the listener. |
options.group | string | - | The group id. If not provided, the listener will be triggered for all groups |
options.inGroup | boolean | false | If true, the listener will be triggered only when the last element of the group receives focus |
options.elementPattern | RegExp | - | The pattern to match the element id. If not provided, the listener will be triggered for all elements |