React renderer for low memory applications
npm install react-tvSee react-tv repository for more details
To install react-tv (React Renderer):
``bash`
$ yarn add react-tv
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:
`js
import { Platform } from 'react-tv'
console.log(Platform('webos')) // true
console.log(Platform('tizen')) // false
console.log(Platform('orsay')) // false
`
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.
`js
import { renderOnAppLoaded } from 'react-tv'
const Component = () => (
)$3
Similar to react-dom findDOMNode
$3
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
and withNavigation which act as helpers for Navigation.`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 (
{ setFocus() }} >
It's {focused} Item
)
}const Button = ({setFocus}) => {
return (
{ setFocus('item-1') }}>
Back To First Item!
)
}const FocusableItem = withFocusable(Item)
const FocusableButton = withFocusable(Button)
function App({currentFocusPath}) {
return (
Current FocusPath: '{currentFocusPath}'
,
onEnterPress={() => console.log('Pressed enter on Button!')}/>
)
}const NavigableApp = withNavigation(App)
ReactTV.render(
``