asgvard

function GalleryRow({items, focused}) {
  const [focusedItemIndex, setFocusedItemIndex] = useState(0);

  const onSetFocus = useCallback(({newFocusedIndex}) => {
    if (!focused) {
      return;
    }

    setFocusedItemIndex(Math.clamp(newFocusedIndex, 0, items.length - 1));
  }, [focused]);

asgvard

function Button() {
  const { ref, focused } = useFocusable();

  return (<div ref={ref} className={focused ? 'button-focused' : 'button'}>
    Press me
  </div>);
}

asgvard

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { useFocusable, init, FocusContext } from '@noriginmedia/norigin-spatial-navigation';

init();

const MENU_FOCUS_KEY = 'MENU';
const menuItems = [1, 2, 3, 4, 5];
const rowItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];