useListenLastGroupReached

Hook to listen when the last group is reached and trigger a callback function.

Usage

import { useListenLastGroupReached } from '@arrow-navigation/react'

const App = () => {
  useListenLastGroupReached(() => {
    console.log('Last group reached')
  }, 'right')

  return (
    <div>
      <FocusableGroup id="group-1">
        <FocusableElement id="btn-1">
          Button 1
        </FocusableElement>
        <FocusableElement id="btn-2">
          Button 2
        </FocusableElement>
      </FocusableGroup>
      <FocusableGroup id="group-2">
        <FocusableElement id="btn-3">
          Button 3
        </FocusableElement>
        <FocusableElement id="btn-4">
          Button 4
        </FocusableElement>
      </FocusableGroup>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Parameters

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