Skip to content

Commit 7be09f1

Browse files
committed
add code example to README
1 parent b71aa5b commit 7be09f1

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed

README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,53 @@
33
> Navigation for TVs using React-TV
44
55
![React-TV Navigation Example](images/example.gif)
6+
7+
[See code from this example](https://github.com/react-tv/react-tv/blob/master/examples/navigation/src/App.js)
8+
9+
Based on Netflix navigation, React-TV-Navigation is a separated package from renderer to manage focusable components. React and [React-TV[(http://github.com/react-tv/react-tv)] are peer-dependencies.
10+
11+
## withFocusable and withNavigation:
12+
13+
Navigation based on HOC and HOF beeing declarative.
14+
15+
```jsx
16+
import React from 'react'
17+
import ReactTV, { renderOnAppLoaded } from 'react-tv'
18+
import { withFocusable, withNavigation } from 'react-tv-navigation'
19+
20+
const Item = ({focused, setFocus, focusPath}) => {
21+
focused = (focused) ? 'focused' : 'unfocused'
22+
return (
23+
<div onClick={() => { setFocus() }} >
24+
It's {focused} Item
25+
</div>
26+
)
27+
}
28+
29+
const Button = ({focused, setFocus, focusPath}) => {
30+
return (
31+
<div onClick={() => { setFocus('focusPath-1') }}>
32+
Back To First Item!
33+
</div>
34+
)
35+
}
36+
37+
const FocusableItem = withFocusable({focusPath: 'item-1'})(Item)
38+
const FocusableOtherItem = withFocusable({focusPath: 'item-2'})(Item)
39+
const FocusableButton = withFocusable({focusPath: 'button'})(Button)
40+
41+
function App({currentFocusPath}) {
42+
return (
43+
<div>
44+
<h1>Current FocusPath: '{currentFocusPath}'</h1>,
45+
<FocusableItem/>
46+
<FocusableOtherItem/>
47+
<FocusableButton/>
48+
</div>
49+
)
50+
}
51+
```
52+
53+
Soon we'll write a decent README.md :)
54+
55+
#### License by MIT

0 commit comments

Comments
 (0)