# react-tv

> React renderer for low memory applications

Latest version **0.4.3** (published 2018-10-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-tv
pnpm add react-tv
yarn add react-tv
bun add react-tv
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.3 |
| Published | 2018-10-31 |
| First published | 2017-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 518.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2033 |
| Author | Raphael Amorim |
| Maintainers | raphamorim |
| Keywords | react, tv, renderer, smarttv, tizen, orsay, lg, samsung, webos |

## Links

- npm: https://www.npmjs.com/package/react-tv
- Repository: https://github.com/raphamorim/react-tv
- Homepage: https://github.com/raphamorim/react-tv#readme
- Issues: https://github.com/raphamorim/react-tv/issues
- npm.io page: https://npm.io/package/react-tv

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.3 (latest) — 2018-10-31
- 0.4.2 — 2018-08-07
- 0.4.1 — 2018-06-12
- 0.4.0 — 2018-06-03
- 0.3.4 — 2018-01-24
- 0.3.3 — 2018-01-21
- 0.3.2 — 2018-01-17
- 0.3.1 — 2017-12-28
- 0.3.0 — 2017-12-13
- 0.3.0-beta.4 — 2017-12-13
- 0.3.0-beta.3 — 2017-12-13
- 0.3.0-beta.2 — 2017-12-05
- 0.3.0-beta.1 — 2017-12-01
- 0.3.0-beta.0 — 2017-11-18
- 0.3.0-alpha.2 — 2017-11-17
- … 12 more at https://npm.io/package/react-tv/versions

## README

# react-tv

[See react-tv repository for more details](https://github.com/raphamorim/react-tv)

To install `react-tv` (React Renderer):

```bash
$ 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:

```js
import { Platform } from 'react-tv'

console.log(Platform('webos')) // true
console.log(Platform('tizen')) // false
console.log(Platform('orsay')) // 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.

```js
import { renderOnAppLoaded } from 'react-tv'

const Component = () => (<div></div>)
const App = renderOnAppLoaded(Component)
```

### `findDOMNode`

Similar to [react-dom findDOMNode](https://reactjs.org/docs/react-dom.html#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](https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8). 

[React-TV Navigation](https://github.com/react-tv/react-tv-navigation) exports `withFocusable` 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 (
    <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'))
```

---
_Source: https://npm.io/package/react-tv · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._