react-key-navigation
v0.0.13
Published
Use the key to navigate around components
Downloads
109
Readme
react-key-navigation
Similar to the "Focus Management" of the BBC 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
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 (
<Navigation>
<Grid rows={100} columns={100}>
{Array.from(Array(10000).keys()).map((v, i) => {
return (
<Focusable key={i} onFocus={() => console.log('focus ' + i)} onBlur={() => console.log('blur ' + i)} onEnterDown={() => console.log('enter ' + i)}>
Element {i}
</Focusable>
);
})}
</Grid>
</Navigation>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));