React TV Space Navigation example

app.tsx

// This component shows a little rabbit movie that you can focus
const Rabbit = ({ onSelect }) => (
  // Declare the focusable behaviour using the SpatialNavigatorNode component!
  <SpatialNavigationNode isFocusable onSelect={onSelect}>
    {/* And adapt the focused layout using this child props :) */}
    {({ isFocused }) => <RabbitLayoutCard isFocused={isFocused} />}
  </SpatialNavigationNode>
)

const Page = () => (
  // Provide the spatial navigator to the page
  <SpatialNavigationRoot>
    {/* Let's declare that our rabbits will be on a same row, spatially */}
    <SpatialNavigationNode direction="horizontal">
      {/* Now we can add our rabbits and have the proper console.log upon selection */}
      {/* with the remote control */}
      <Rabbit onSelect={() => console.log("rabbit 1 is selected !"}/>
      <Rabbit onSelect={() => console.log("rabbit 2 is selected !"}/>
      <Rabbit onSelect={() => console.log("rabbit 3 is selected !"}/>
    </SpatialNavigationNode>
  </SpatialNavigationRoot>
)