0.0.3 • Published 8 years ago

rn-editable-tag-cloud

Licence

—

Version

0.0.3

Deps

Vulns

Weekly

Summary Dependency Versions

React Native component that contains and auto-wraps tags inside. Tags can be added or removed.

Installation

npm install --save rn-editable-tag-cloud

Usage example

props	type	required	usage
items	array	yes	Set of tags in tag cloud
onItemsChanged	function	yes	Callback when set of tags has changed
renderItem	function	yes	Render component for each tag item. Touchable wrapper will be handled inside tag cloud
tagInputMinWidth	integer	yes	Minimum width of tag text input (if set addable) before a line break
addable	boolean	no	If set, tag cloud will have a text input for adding tag
removable	boolean	no	If set, tag cloud will remove tag on clicking on tag item
tagInputProps	object	no	Props that will be set into tag text input
delimiters	array	no	Set of character that will separate tags in a sequence of input text
tagInputWrapStyle	object	no	Style object for wrapper component of tag text input

<EditableTagCloud
          tagInputMinWidth={100}
          addable
          removable
          tagInputProps={{
            underlineColorAndroid: 'rgba(0,0,0,0)',
            style: styles.tagInput
          }}
          tagInputWrapStyle={styles.tagInputWrap}
          delimiters={[',', '/']}
          onItemsChanged={items => this.setState({allTags: items})}
          renderItem={(item, index) => {
            return (
              <View style={styles.itemWrap}>
                <Text style={styles.itemText}>{item}</Text>
              </View>
            )
          }}
          items={this.state.allTags} />