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

NameTypeDefaultDescription
callbackfunction-Callback function to be called when the last element of a group receives focus
directionstring-The direction to navigate when the last element of a group receives focus. Possible values are: 'up', 'down', 'left' and 'right'
optionsobject-The options for the listener.
options.groupstring-The group id. If not provided, the listener will be triggered for all groups
options.inGroupbooleanfalseIf true, the listener will be triggered only when the last element of the group receives focus
options.elementPatternRegExp-The pattern to match the element id. If not provided, the listener will be triggered for all elements