spatial-nav-hooks-full-example.jsx

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];

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

  return (
    <div ref={ref} className={focused ? 'menu-item-focused' : 'menu-item'} />
  );
}

function Menu() {
  const { ref, focusKey } = useFocusable({ focusKey: MENU_FOCUS_KEY });

  return (
    <FocusContext.Provider value={focusKey}>
      <div ref={ref} className="menu">
        {menuItems.map((menuItem) => (
          <MenuItem key={menuItem} />
        ))}
      </div>
    </FocusContext.Provider>
  );
}

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

  return (
    <div
      ref={ref}
      className={focused ? 'gallery-item-focused' : 'gallery-item'}
    />
  );
}

function GalleryRow() {
  const { ref, focusKey } = useFocusable();

  return (
    <FocusContext.Provider value={focusKey}>
      <div ref={ref} className="gallery-row">
        {rowItems.map((galleryItem) => (
          <GalleryItem key={galleryItem} />
        ))}
      </div>
    </FocusContext.Provider>
  );
}

function App() {
  const { ref, setFocus, focusKey } = useFocusable();

  useEffect(() => {
    setFocus(MENU_FOCUS_KEY);
  }, [setFocus]);

  return (
    <FocusContext.Provider value={focusKey}>
      <div ref={ref} className="app">
        <Menu />
        <GalleryRow />
      </div>
    </FocusContext.Provider>
  );
}

ReactDOM.render(<App />, document.querySelector('#root'));