https://github.com/avocode/react-listview

Create List components with keyboard support
https://github.com/avocode/react-listview

Last synced: about 1 month 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 (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T16:39:58.000Z (about 2 years ago)
• Last Synced: 2024-10-12T17:58:45.251Z (2 months ago)
• Language: CoffeeScript
• Size: 863 KB
• Stars: 13
• Watchers: 10
• Forks: 6
• Open Issues: 18
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# React ListView

**Create List components with keyboard support**

![Build Status](https://travis-ci.org/avocode/react-listview.svg?branch=master)

## Usage

```

npm i react-listview-keys --save

```

## Example

![React ListView example](https://s3.amazonaws.com/f.cl.ly/items/322J3v0u1n2l39153327/example.gif?v=fe99b357)

```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 [email protected]: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