0.3.1 • Published 7 years ago
react-native-selectable-grid v0.3.1
react-native-selectable-grid
Customizeable selectable (none, one or more) grid.
Installation
- Run:
npm install react-native-selectable-grid --saveoryarn add react-native-selectable-grid
Usage (Example)
import React, { Component } from 'react';
import { View } from 'react-native';
import SelectableGrid from 'react-native-selectable-grid'
const fakeData = [{ label: '1' }, { label: '2' }, { label: '3' }, { label: '4' }, { label: '5' }];
class App extends Component {
render() {
return (
<View>
<SelectableGrid
data={fakeData}
/>
</View>
);
}
}Properties
| Prop | Type | Description | Default | Required |
|---|---|---|---|---|
data | array | Receives array of data to be displayed | By default receives array of objects with 'label' key | Required |
height | number | Height of individual box | By default height will be same as width | Optional |
maxPerRow | number | Maximum boxes per row (all boxes in grid will have the same width and height) | 2 | Optional |
maxSelect | number | Number of selectable boxes (0 = non-selectable, 1 = only one is selectable, 2 = only two are selectable, so on and so forth) | 1 | Optional |
unselectedRender | function | Custom component for unselected item | None | Optional |
selectedRender | function | Custom component for selected item | None | Optional |
unselectedStyle | style | Style for unselected boxes | None | Optional |
selectedStyle | style | Style for selected boxes | None | Optional |
onSelect | function | Return selected item(s) by index everytime user make selections | null | Optional |
Custom Render
You can specify unselectedRender only and without selectedRender. By default, it will only change backgroundColor or any styles you specified in selectedStyle, when you select a box.
E.g:
<SelectableGrid
data={somedata}
unselectedRender={data => (
<View>
<Text style={{ color: 'red', fontSize: 35 }}>{data.label}</Text>
</View>
)}
selectedRender={data => (
<View>
<Text style={{ color: 'blue', fontSize: 35 }}>{data.label}</Text>
</View>
)}
/>Retrieving Selected Data
There are two ways of retrieving selected data.
1. Using onSelect
2. Using ref
To use onSelect to retrieve selected data, see example below:
import SelectableGrid from 'react-native-selectable-grid';
...
<SelectableGrid
data={fakeData}
onSelect={selectedData => alert(selectedData)}
/>
...To use ref to retrieve selected data via selectedData() function, see example below:
import SelectableGrid from 'react-native-selectable-grid';
...
<SelectableGrid
data={fakeData}
ref={(ref) => {
this.sbRef = ref;
}}
/>
...
<Button onPress={() => alert(this.sbRef.selectedData())}>
<Text children={'Retrieve data'}>
</Button>If nothing is selected, both ways returns null.