A react-tv-based implementation of Spatial Navigation by Luke Chang
npm install react-tv-navigation> Navigation for TVs using React-TV
tl;dr: Based on Netflix TV Navigation System
React-TV-Navigation is a separated package from React-TV renderer to manage focusable components.
``bash`
yarn add react-tv-navigation
React and React-TV are peer-dependencies.
and withNavigationReact-TV Navigation exports two functions: withFocusable and withNavigation.
A declarative navigation system based on HOC's for focus and navigation control.
`jsx
import React from 'react'
import ReactTV from 'react-tv'
import { withFocusable, withNavigation } from 'react-tv-navigation'
const Item = ({focused, setFocus, focusPath}) => {
focused = (focused) ? 'focused' : 'unfocused'
return (
const Button = ({setFocus}) => {
return (
const FocusableItem = withFocusable(Item)
const FocusableButton = withFocusable(Button)
function App({currentFocusPath}) {
return (
const NavigableApp = withNavigation(App)
ReactTV.render(
``
Soon we'll write a decent README.md :)
#### License by MIT