Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__tests__ navigation: migrate react-tv-navigation to workspace Oct 21, 2018
dist
images navigation: migrate react-tv-navigation to workspace Oct 21, 2018
src navigation: migrate react-tv-navigation to workspace Oct 21, 2018
README.md
package.json all: Bump versions Nov 7, 2018
rollup.config.js navigation: migrate react-tv-navigation to workspace Oct 21, 2018

README.md

React-TV Navigation

Navigation for TVs using React-TV

CircleCI

tl;dr: Based on Netflix TV Navigation System

React-TV Navigation Example

See code from this example

React-TV-Navigation is a separated package from React-TV renderer to manage focusable components.

Installing

yarn add react-tv-navigation

React and React-TV are peer-dependencies.

withFocusable and withNavigation

React-TV Navigation exports two functions: withFocusable and withNavigation.

A declarative navigation system based on HOC's for focus and navigation control.

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 (
    <div onClick={() => { setFocus() }} >
      It's {focused} Item
    </div>
  )
}

const Button = ({setFocus}) => {
  return (
    <div onClick={() => { setFocus('item-1') }}>
      Back To First Item!
    </div>
  )
}

const FocusableItem = withFocusable(Item)
const FocusableButton = withFocusable(Button)

function App({currentFocusPath}) {
  return (
    <div>
      <h1>Current FocusPath: '{currentFocusPath}'</h1>,
      <FocusableItem focusPath='item-1'/>
      <FocusableItem focusPath='item-2'/>
      <FocusableButton
        focusPath='button'
        onEnterPress={() => console.log('Pressed enter on Button!')}/>
    </div>
  )
}

const NavigableApp = withNavigation(App)

ReactTV.render(<NavigableApp/>, document.querySelector('#app'))

Soon we'll write a decent README.md :)

License by MIT

You can’t perform that action at this time.