---
name: CHList
route: /Lists/CHList
menu: Lists
---

import { Playground, PropsTable } from 'docz'
import { CHList } from '../../src'
import { Alert, Text } from 'react-native'
import { colors, scale } from '@barcard/functions'

## CHList

## About

Configurable hybrid FlatList wrapper that allows for both single and multiple
item selection, as long as handlers called from the parent, while injecting
`index` and `isSelected` props to child cells.

## Basic Usage

<Playground>
  <Text>CHList with Multiple Selection:</Text>
  <CHList
    data={['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']}
    renderItem={({ item, index }) => (
      <Text style={{ color: colors.white }} key={index}>
        {item}
      </Text>
    )}
    initialRenderCount={5}
    renderBatchCount={5}
    renderWindowCount={5}
    onSelection={(index, items) => {
      alert(items)
    }}
    horizontal={false}
    isMultipleSelectionEnabled={true}
    padding={scale(8)}
  />
</Playground>

## Implementation Notes

In the `renderItem` method, there's no need to specify `index` and `isSelected`.
Those props are injected automatically and can be accessed from within the props
of the child cells, in this case `Text`.

## Properties

<PropsTable of={CHList} includeDescription={true} />
