# @pymatech/react-tag-input

> A React Bootstrap4 tag input component

Latest version **0.7.0** (published 2019-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @pymatech/react-tag-input
pnpm add @pymatech/react-tag-input
yarn add @pymatech/react-tag-input
bun add @pymatech/react-tag-input
```

## 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.7.0 |
| Published | 2019-03-28 |
| First published | 2019-02-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Pymatech |
| Maintainers | pymatech-npm, robford123 |
| Keywords | react, bootstrap, boostrap4, component, tag, input, pymatech |

## Links

- npm: https://www.npmjs.com/package/@pymatech/react-tag-input
- Repository: https://github.com/pymatech/react-tag-input
- Homepage: https://www.pymatech.com/
- Issues: https://github.com/pymatech/react-tag-input/issues
- npm.io page: https://npm.io/package/@pymatech/react-tag-input

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.8.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.2

## 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.7.0 (latest) — 2019-03-28
- 0.6.0 — 2019-02-19
- 0.5.0 — 2019-02-18
- 0.4.0 — 2019-02-18
- 0.3.0 — 2019-02-17
- 0.2.0 — 2019-02-17
- 0.1.0 — 2019-02-15

## README

# react-tag-input

<a href="https://github.com/pymatech/react-tag-input/releases/latest" target="\_parent">
  <img alt="" src="https://img.shields.io/github/release/pymatech/react-tag-input.svg?style=plastic" />
</a>

<a href="https://www.npmjs.com/package/@pymatech/react-tag-input" target="\_parent">
  <img alt="" src="https://img.shields.io/npm/v/@pymatech/react-tag-input/latest.svg?style=plastic" />
</a>

<a href="https://github.com/pymatech/react-tag-input/blob/master/LICENSE" target="\_parent">
  <img alt="" src="https://img.shields.io/github/license/pymatech/react-tag-input.svg?style=plastic" />
</a>

A Bootstrap v4 CSS compatible tag input component for React

## Installation

`npm install --save @pymatech/react-tag-input`

## How to use

Import the component where you wish to use it

`import TagInput from "@pymatech/react-tag-input"`

Basic syntax for the component

`<TagInput className="form-control form-group" placeholder="Enter tags..." allowAddNew={true} />`

### Notes

* Duplicate tags are disallowed
* Pressing `<ENTER>` will attempt to add a tag
* Pressing the separator will attempt to add a tag
* On leaving the form field any partially entered tag name will be cleared
* Pressing `<ENTER>` when no input is partially entered will allow a form to submit

### Props

| _Prop_              | _Description_                                                           | _Default value_          | _Example_                        |
| ------------------- | :---------------------------------------------------------------------: | :----------------------: | :------------------------------: |
| allowNewTags        | If *true* tag creation is allowed, otherwise existing tags must be used | *false*                  | true                             |
| className           | CSS classes to apply to the outer element                               | *empty string*           | form-control                     |
| defaultValue        | Initial value used to populate the tags                                 | *empty string*           | Dodge Ford Chevy                 |
| onChange            | Handler that receives the updated string value of the tags              | *undefined*              | { (value) => console.log(value)} |
| placeholder         | Text to display when there are no tags                                  | *empty string*           | Enter tags...                    |
| separator           | Separator to be used between items in the value prop                    | " "                      | ","                              |
| tags                | List of accepted tags                                                   | *undefined*              | ["Dodge","Ford","Chevy"]         |
| emptyTagListMessage | Message to display when the tag list dropdown is empty                  | "No items found"         | "No car makes found..."          |
| truncateTagMenuAt   | Truncate the dropdown at x items and show that more items are available | *undefined*              | {10}                             |

---
_Source: https://npm.io/package/@pymatech/react-tag-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._