https://github.com/dead/react-key-navigation
https://github.com/dead/react-key-navigation
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dead/react-key-navigation
- Owner: dead
- License: mit
- Created: 2017-11-19T08:47:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-08-19T17:33:43.000Z (almost 7 years ago)
- Last Synced: 2024-04-26T20:34:46.952Z (about 2 years ago)
- Language: JavaScript
- Size: 394 KB
- Stars: 73
- Watchers: 12
- Forks: 57
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-smart-tv - react-key-navigation - Spatial Navigation components for React. Similar to the ["Focus Management"](http://bbc.github.io/tal/widgets/focus-management.html) of the [BBC TAL](https://bbc.github.io/tal/). (Navigation libraries / Google Chromecast)
README
# react-key-navigation
Similar to the "[Focus Management](http://bbc.github.io/tal/widgets/focus-management.html)" of the [BBC TAL](http://bbc.github.io/tal/).
## WIP
- [x] Focusable Component
- [x] onFocus
- [x] onBlur
- [x] onEnterDown
- [x] Grid
- [x] Horizontal List
- [x] Vertical List
- [ ] Horizontal List Scrollable
- [ ] Vertical List Scrollable
- [ ] Use Higher-Order Components?
- [ ] Tests
- [ ] Examples
- [ ] Documentation
## Example
```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Navigation, {VerticalList, HorizontalList, Grid, Focusable} from 'react-key-navigation';
class App extends Component {
render() {
return (
{Array.from(Array(10000).keys()).map((v, i) => {
return (
console.log('focus ' + i)} onBlur={() => console.log('blur ' + i)} onEnterDown={() => console.log('enter ' + i)}>
Element {i}
);
})}
);
}
}
ReactDOM.render(, document.getElementById('root'));
```