Simple React Native tag selector control with folding of overflowed tags
$ npm i react-native-tag-selector --save
import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import TagSelector from 'react-native-tag-selector';
class Example extends React.Component {
tags = [
{
id: 'quick',
name: 'quick'
},
{
id: 'brown',
name: 'brown'
},
{
id: 'fox',
name: 'fox'
}
]
constructor(props) {
super(props);
this.state = {
selectedTags: []
}
}
render() {
return (
<View>
<Text>
Selected: {this.state.selectedTags.map(tag => `${tag} `)}
</Text>
<TagSelector
maxHeight={70}
tags={this.tags}
onChange={(selected) => this.setState({ selectedTags: selected })} />
</View>
);
}
}
With all props:
<TagSelector
maxHeight={70}
expandCaptions={['more', 'less']}
expdandedContainerStyle = {styles.containerExpanded}
containerStyle = {styles.container}
selectedTagStyle = {styles.tagSelected}
tagStyle = {styles.tag}
separatorStyle = {styles.separator}
expandBtnStyle = {styles.btnStyle}
expandTextStyle = {styles.btnText}
tags={this.tags}
onChange={ (selected) => this.setState({selectedTags: selected})} />
Key | Type | Default | Description |
---|---|---|---|
onChange | Function | *required | callback on change with one (tagsSelected) param - array of selected tags' id |
maxHeight | Array | 0 | max height of view to allow before appears 'more' text and folding functionality. 0 to disable folding and always show all tags |
tags | Array | *required | array of tags to render - objects of type {id: string, name: string} |
expandCaptions | Array | ['more', 'less'] | array of expand captions - ['Show more', 'Show less'] |
expdandedContainerStyle | style | - | style of expanded container |
containerStyle | style | - | style of default container |
selectedTagStyle | style | - | selected tag style |
tagStyle | style | - | default tag style |
separatorStyle | style | - | separator between tags and expand button style |
expandBtnStyle | style | - | expand button style |
expandTextStyle | style | - | expand button text style |
- @thedukeatreides The main author.