{"id":28185203,"url":"https://github.com/dead/react-key-navigation","last_synced_at":"2025-10-28T19:07:44.578Z","repository":{"id":40625819,"uuid":"111278763","full_name":"dead/react-key-navigation","owner":"dead","description":null,"archived":false,"fork":false,"pushed_at":"2019-08-19T17:33:43.000Z","size":403,"stargazers_count":73,"open_issues_count":8,"forks_count":57,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-04-26T20:34:46.952Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dead.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-19T08:47:44.000Z","updated_at":"2024-04-26T20:34:46.953Z","dependencies_parsed_at":"2022-08-09T23:50:43.856Z","dependency_job_id":null,"html_url":"https://github.com/dead/react-key-navigation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dead%2Freact-key-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dead%2Freact-key-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dead%2Freact-key-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dead%2Freact-key-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dead","download_url":"https://codeload.github.com/dead/react-key-navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478185,"owners_count":22077678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-16T06:11:39.457Z","updated_at":"2025-10-28T19:07:44.478Z","avatar_url":"https://github.com/dead.png","language":"JavaScript","funding_links":[],"categories":["Navigation libraries"],"sub_categories":["Google Chromecast"],"readme":"# react-key-navigation\nSimilar to the \"[Focus Management](http://bbc.github.io/tal/widgets/focus-management.html)\" of the [BBC TAL](http://bbc.github.io/tal/).\n\n## WIP\n- [x] Focusable Component\n  - [x] onFocus\n  - [x] onBlur\n  - [x] onEnterDown\n- [x] Grid\n- [x] Horizontal List\n- [x] Vertical List\n- [ ] Horizontal List Scrollable\n- [ ] Vertical List Scrollable\n- [ ] Use Higher-Order Components?\n- [ ] Tests\n- [ ] Examples\n- [ ] Documentation\n\n## Example\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport Navigation, {VerticalList, HorizontalList, Grid, Focusable} from 'react-key-navigation';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cNavigation\u003e\n        \u003cGrid rows={100} columns={100}\u003e\n          {Array.from(Array(10000).keys()).map((v, i) =\u003e {\n            return (\n              \u003cFocusable key={i} onFocus={() =\u003e console.log('focus ' + i)} onBlur={() =\u003e console.log('blur ' + i)} onEnterDown={() =\u003e console.log('enter ' + i)}\u003e\n                Element {i}\n              \u003c/Focusable\u003e\n            );\n          })}\n        \u003c/Grid\u003e\n      \u003c/Navigation\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdead%2Freact-key-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdead%2Freact-key-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdead%2Freact-key-navigation/lists"}