diff --git a/README.md b/README.md
index 5486fa48..9b7ead2f 100644
--- a/README.md
+++ b/README.md
@@ -87,11 +87,22 @@ class SampleApp extends Component {
## Data Format
-The selector accept a specific format of data:
+The selector accepts a specific format of data:
```javascript
[{ key: 5, label: 'Red Apples' }]
```
+Optionally provide a `component` key which overrides the default label text:
+```javascript
+[{
+ key: 5,
+ label: 'Red Apples',
+ component: Red Apples custom component ☺
+}]
+```
+
+
+
If your data has a specific format, you can define extractors of data, example:
```javascript
this.setState({data: [{ id: 5, name: 'Red Apples' }]});
@@ -110,14 +121,15 @@ return (
### Props
Prop | Type | Optional | Default | Description
------------------- | -------- | -------- | ------------ | -----------
-`data` | array | No | [] | array of objects with a unique key and label to select in the modal.
+`data` | array | No | [] | array of objects with a unique `key` and `label` to select in the modal. Optional `component` overrides label text.
`onChange` | function | Yes | () => {} | callback function, when the users has selected an option
`onModalOpen` | function | Yes | () => {} | callback function, when modal is opening
`onModalClose` | function | Yes | () => {} | callback function, when modal is closing
`keyExtractor` | function | Yes | (data) => data.key | extract the key from the data item
`labelExtractor` | function | Yes | (data) => data.label | extract the label from the data item
+`componentExtractor`| function | Yes | (data) => data.component | extract the component from the data item
`visible` | bool | Yes | false | control open/close state of modal
-`closeOnChange`´ | bool | Yes | true | control if modal closes on select
+`closeOnChange` | bool | Yes | true | control if modal closes on select
`initValue` | string | Yes | `Select me!` | text that is initially shown on the button
`cancelText` | string | Yes | `cancel` | text of the cancel button
`animationType` | string | Yes | `slide` | type of animation to be used to show the modal. Must be one of `none`, `slide` or `fade`.
diff --git a/SampleApp/App.js b/SampleApp/App.js
index 6fb9a2ee..3b55c1eb 100644
--- a/SampleApp/App.js
+++ b/SampleApp/App.js
@@ -4,6 +4,7 @@ import React, { Component } from 'react';
import {
View,
+ Text,
TextInput,
Switch
} from 'react-native';
@@ -24,7 +25,7 @@ class SampleApp extends Component {
let index = 0;
const data = [
{ key: index++, section: true, label: 'Fruits' },
- { key: index++, label: 'Red Apples' },
+ { key: index++, label: 'Red Apples', component: Red Apples custom component ☺ },
{ key: index++, label: 'Cherries' },
{ key: index++, label: 'Cranberries' },
{ key: index++, label: 'Pink Grapefruit' },
diff --git a/index.js b/index.js
index e6514d76..09c99700 100644
--- a/index.js
+++ b/index.js
@@ -72,6 +72,7 @@ const defaultProps = {
onModalClose: () => {},
keyExtractor: (item) => item.key,
labelExtractor: (item) => item.label,
+ componentExtractor: (item) => item.component,
visible: false,
closeOnChange: true,
initValue: 'Select me!',
@@ -170,17 +171,29 @@ export default class ModalSelector extends React.Component {
}
renderSection = (section) => {
+ const optionComponent = this.props.componentExtractor(section);
+ let component = optionComponent || (
+ {this.props.labelExtractor(section)}
+ );
+
return (
- {this.props.labelExtractor(section)}
+ {component}
);
}
renderOption = (option, isLastItem, isFirstItem) => {
+ const optionComponent = this.props.componentExtractor(option);
const optionLabel = this.props.labelExtractor(option);
const isSelectedItem = optionLabel === this.state.selected;
+ let component = optionComponent || (
+
+ {optionLabel}
+
+ );
+
return (
-
-
- {optionLabel}
-
+
+ {component}
);
}