# @adecrown/react-native-multiple-tags
> Multiple Select using Tags including default Selected Tags
Latest version **0.1.1** (published 2021-06-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install @adecrown/react-native-multiple-tags
pnpm add @adecrown/react-native-multiple-tags
yarn add @adecrown/react-native-multiple-tags
bun add @adecrown/react-native-multiple-tags
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-06-03 |
| First published | 2021-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | adecrown |
| Maintainers | adecrown |
| Keywords | react-native-tags, react-native-multiple-tags, react, react-native, native, multiple, select, tags, list, search, radio, button |
## Links
- npm: https://www.npmjs.com/package/@adecrown/react-native-multiple-tags
- Repository: https://github.com/adecrown/react-native-multiple-tags
- Homepage: https://github.com/adecrown/react-native-multiple-tags#readme
- Issues: https://github.com/adecrown/react-native-multiple-tags/issues
- npm.io page: https://npm.io/package/@adecrown/react-native-multiple-tags
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.1.1 (latest) — 2021-06-03
- 0.1.0-1 — 2021-05-30
- 0.1.0-0 — 2021-05-30
- 0.0.12 — 2021-05-22
- 0.0.11 — 2021-05-22
- 0.0.10 — 2021-04-10
- 0.0.9 — 2021-04-09
- 0.0.8 — 2021-04-09
- 0.0.7 — 2021-04-09
- 0.0.6 — 2021-04-09
- 0.0.5 — 2021-04-09
- 0.0.4 — 2021-04-09
- 0.0.3 — 2021-04-09
- 0.0.2 — 2021-04-09
## README
# react-native-multiple-tags
Multiple Select using Tags
# Demo
# Installation
```s
npm i -S @adecrown/react-native-multiple-tags
```
# Usage
```js
import React, { useState } 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',
},
];
const WelcomeComponent = () => {
const [content, setContent] = useState([]);
const [contentx, setContentx] = useState([]);
return (
{(() =>
content.map((item) => (
{' '}
{item.key}: {item.value}{' '}
)))()}
{(() => contentx.map((item) => {item} ))()}
);
};
export default WelcomeComponent;
```
> You can add a custom tag by typing it and then pressing enter
## 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 |
| defaultInstructionStyle | No | object | custom style for default instructions |
| placeholder | No | string | input placeholder |
| inputStyle | No | object | custom style for input field. |
| allowCustomTags | No | boolean | bool to allow users to input new tags not in the originial tags array. Defaults to true |
> You can add a tag that is not in the list by hiting enter.
# Todo
- [x] make it more attractive..
PR's are welcome
---
_Source: https://npm.io/package/@adecrown/react-native-multiple-tags · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._