react-tv
See react-tv repository for more details
To install react-tv
(React Renderer):
$ yarn add react-tv
Platform
When building a cross-platform TV app, you'll want to re-use as much code as possible. You'll probably have different scenarios where different code might be necessary.
For instance, you may want to implement separated visual components for LG-WebOS
and Samsung-Tizen
.
React-TV provides the Platform
module to easily organize your code and separate it by platform:
console // trueconsole // falseconsole // false
renderOnAppLoaded
Takes a component and returns a higher-order component version of that component, which renders only after application was launched, allows to not write diffent logics for many devices.
const Component = <div></div>const App =
findDOMNode
Similar to react-dom findDOMNode
Navigation
If you want to start with Navigation for TVs. React-TV provides a package for spatial navigation with declarative support based on Netflix navigation system.
React-TV Navigation exports withFocusable
and withNavigation
which act as helpers for Navigation.
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 = > focused Item </div> const Button = setFocus return <div => Back To First Item! </div> const FocusableItem = const FocusableButton = { return <div> <h1>Current FocusPath: '{currentFocusPath}'</h1> <FocusableItem ='item-1'/> <FocusableItem ='item-2'/> <FocusableButton ='button' =/> </div> } const NavigableApp = ReactTV