https://github.com/avocode/react-listview
Create List components with keyboard support
https://github.com/avocode/react-listview
Last synced: about 1 year ago
JSON representation
Create List components with keyboard support
- Host: GitHub
- URL: https://github.com/avocode/react-listview
- Owner: avocode
- Created: 2016-05-15T23:39:29.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T16:39:58.000Z (over 3 years ago)
- Last Synced: 2025-04-30T18:09:48.776Z (about 1 year ago)
- Language: CoffeeScript
- Size: 863 KB
- Stars: 13
- Watchers: 9
- Forks: 6
- Open Issues: 18
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React ListView
**Create List components with keyboard support**
## Usage
```
npm i react-listview-keys --save
```
## Example
```coffee
ListView = require 'react-listview'
ListView
className: 'list-view'
itemClassName: 'list-view__item'
selectedItemClassName: 'list-view__item--selected'
items: @state.listItems
selectedItemId: @state.selectedListItemId
collapsedItemIds: @state.collapsedListItemIds
onCollapseItem: @_handleCollapseListItem
onExpandItem: @_handleExpandListItem
onSelectItem: @_handleSelectListItem
renderItem: (itemId, parentItemIds = []) =>
item = @_getItemById(itemId)
if parentItemIds.length == 0
if item.children?.size > 0
SimpleListItem
item: item
else
FoldableListItem
item: item
else
SimpleListSubItem
item: item
```
### Props
- `className` - CSS class of the whole ListView component
- `itemClassName` - CSS class of non-selected ListItem
- `selectedItemClassName` - CSS class of selected ListItem
- `items` - immutable.List of items to render
- `selectedItemId` - `id` of selected items
- `collapsedItemIds` - immutable.List of `id`s of collapsed parent items
- `onCollapseItem` - callback called when collapsing a parent item
- `onExpandItem` - callback called when expanding a parent item
- `onSelectItem` - callback called after click on an item
- `renderItem` - function that renders the item (passed as callback so apps can handle the rendering of the main content itself)
## Development
```
git clone git@github.com:avocode/react-listview.git
cd react-listview
npm install
```
Run tests:
```
npm test
```
### TODOs
- refactor logic - support deeper lists
- add shouldcomponentupdates
- improve tests
- rethink tabIndices
- add more examples
- add prop for last item skipping