Skip to content

TheGamerRespow/react-key-navigation

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-key-navigation

Similar to the "Focus Management" of the BBC TAL.

WIP

  • Focusable Component
    • onFocus
    • onBlur
    • onEnterDown
  • Grid
  • Horizontal List
  • 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'));

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%