0.0.4 • Published 7 years ago

react-native-multiple-tags v0.0.4

Weekly downloads
10
License
MIT
Repository
github
Last release
7 years ago

react-native-multiple-tags

Multiple Select using Tags

Demo

Installation

npm i -S react-native-multiple-tags

Usage

import React, { Component } from 'react';
import {
        View,
        Text,
} from 'react-native';
import MultipleTags from 'react-native-multiple-tags';


const tags = [
  'cherry',
  'mango',
  'cashew',
  'almond',
  'guava',
  'pineapple',
  'orange',
  'pear',
  'date',
  'strawberry',
  'pawpaw',
  'banana',
  'apple',
  'grape',
  'lemon',
];

const objectTags = [
  {
    key: 'id_01',
    value: 'cherry',
  },
  {
    key: 'id_02',
    value: 'mango',
  },
  {
    key: 'id_03',
    value: 'cashew',
  },
  {
    key: 'id_04',
    value: 'almond'
  },
  {
    key: 'id_05',
    value: 'guava'
  },
  {
    key: 'id_06',
    value: 'pineapple'
  },
  {
    key: 'id_07',
    value: 'orange'
  },
  {
    key: 'id_08',
    value: 'pear'
  },
  {
    key: 'id_09',
    value: 'date'
  }
]


class WelcomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: [],
      contentx: [],
    };
  }

  render() {
    return (
      <View>
        <MultipleTags
            tags={objectTags}
            search
            onChangeItem={(content) => { this.setState({ content }); }}
            title="Fruits"
          />
          {
          (() => this.state.content.map(item => <Text key={item.key}> {item.key}: {item.value} </Text>))()
          }
        <MultipleTags
          tags={tags}
          search
          onChangeItem={(contentx) => { this.setState({ contentx }); }}
          title="Fruits"
        />
        {
        (() => this.state.contentx.map(item => <Text key={item}> {item} </Text>) )()
        }
      </View>
    );
  }
}

export default WelcomeComponent;     

Props


PropRequiredTypesPurpose
tagsYesarrayList of tags/items to display for selection. This can be array of objects or just an array of strings
preselectedTagsNoarrayList of tags/items to be selected on default. tags can be array of objects or array of strings.
objectKeyIdentifierNostringwhen using array of objects you can signify the key property of the object i.e objectTags = [{ id: 'id_01', name: 'cherry' }] and that becomes objectKeyIdentifier = 'id' , default is key
objectValueIdentifierNostringwhen using array of objects you can signify the value property of the object i.e objectTags = [{ id: 'id_01', name: 'cherry' }] and that becomes objectValueIdentifier = 'name', default is value
searchNobooleanset search to false to hide the search bar.
onChangeItemYesfunctionJavaScript function passed in as an argument. This function is called whenever items are added or removed in the component.
titleNostringThe Name or Category of tags.
iconAddNameNostringName of icon to be used instead of the regular +, icon name must be of Ionicons in react-native-vector-icons
searchHitResponseNostringText to display when search query hits nothing.
defaultInstructionClosedNostringText to instruct users what to do when closed
defaultTotalRenderedTagsNonumberTotal number of tags to show or render, default is 30
defaultInstructionOpenNostringText to instruct users what to do when opened
sizeIconTagNonumberSize Icon of add (plus) item.
showIconAddNobooleanSet false if you want hide the Add Icon.
labelActiveTagNoobjectCustom style for active tag label.
tagActiveStyleNoobjectCustom style for active tag.
visibleOnOpenNoboolean

Todo

  • Supports array of objects.

PR's are welcome