-
-
Save pierpo/b2a846aecb37a2b33c8ffd8d2626db5d to your computer and use it in GitHub Desktop.
React TV Space Navigation example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This component shows a little rabbit movie that you can focus | |
const Rabbit = ({ onSelect }) => ( | |
// Declare the focusable behaviour using the SpatialNavigatorNode component! | |
<SpatialNavigationNode isFocusable onSelect={onSelect}> | |
{/* And adapt the focused layout using this child props :) */} | |
{({ isFocused }) => <RabbitLayoutCard isFocused={isFocused} />} | |
</SpatialNavigationNode> | |
) | |
const Page = () => ( | |
// Provide the spatial navigator to the page | |
<SpatialNavigationRoot> | |
{/* Let's declare that our rabbits will be on a same row, spatially */} | |
<SpatialNavigationNode direction="horizontal"> | |
{/* Now we can add our rabbits and have the proper console.log upon selection */} | |
{/* with the remote control */} | |
<Rabbit onSelect={() => console.log("rabbit 1 is selected !"}/> | |
<Rabbit onSelect={() => console.log("rabbit 2 is selected !"}/> | |
<Rabbit onSelect={() => console.log("rabbit 3 is selected !"}/> | |
</SpatialNavigationNode> | |
</SpatialNavigationRoot> | |
) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment