Skip to content

Multiple Select inform of Tags with search bar for react native

License

Notifications You must be signed in to change notification settings

tolucaleb/react-native-multiple-tags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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


Prop Required Types Purpose
tags Yes array List of tags/items to display for selection. This can be array of objects or just an array of strings
preselectedTags No array List of tags/items to be selected on default. tags can be array of objects or array of strings.
objectKeyIdentifier No string when 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
objectValueIdentifier No string when 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
search No boolean set search to false to hide the search bar.
onChangeItem Yes function JavaScript function passed in as an argument. This function is called whenever items are added or removed in the component.
title No string The Name or Category of tags.
iconAddName No string Name of icon to be used instead of the regular +, icon name must be of Ionicons in react-native-vector-icons
searchHitResponse No string Text to display when search query hits nothing.
defaultInstructionClosed No string Text to instruct users what to do when closed
defaultTotalRenderedTags No number Total number of tags to show or render, default is 30
defaultInstructionOpen No string Text to instruct users what to do when opened
sizeIconTag No number Size Icon of add (plus) item.
showIconAdd No boolean Set false if you want hide the Add Icon.
labelActiveTag No object Custom style for active tag label.
tagActiveStyle No object Custom style for active tag.
visibleOnOpen No boolean

Todo

  • Supports array of objects.

PR's are welcome

About

Multiple Select inform of Tags with search bar for react native

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published