# react-tagsinput

> Highly customizable React component for inputing tags

Latest version **3.20.3** (published 2023-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-tagsinput
pnpm add react-tagsinput
yarn add react-tagsinput
bun add react-tagsinput
```

## Health

**Score 38/100 (D)** — status: abandoned.

Positive: has types package; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.20.3 |
| Published | 2023-06-10 |
| First published | 2015-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-tagsinput) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1356 |
| Author | Ola Holmström |
| Maintainers | olahol |
| Keywords | react, tags, input, component, javascript, react-component |

## Links

- npm: https://www.npmjs.com/package/react-tagsinput
- Repository: https://github.com/olahol/react-tagsinput
- Issues: https://github.com/olahol/react-tagsinput/issues
- npm.io page: https://npm.io/package/react-tagsinput

## 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

- 3.20.3 (latest) — 2023-06-10
- 1.5.0-beta1 (beta) — 2015-09-10
- 3.20.2 — 2023-06-10
- 3.20.1 — 2023-04-10
- 3.20.0 — 2022-10-13
- 3.19.0 — 2017-10-19
- 3.18.0 — 2017-09-16
- 3.17.0 — 2017-06-07
- 3.16.1 — 2017-04-11
- 3.16.0 — 2017-04-09
- 3.15.1 — 2017-02-12
- 3.15.0 — 2017-02-11
- 3.14.3 — 2017-02-11
- 3.14.2 — 2017-02-11
- 3.14.1 — 2017-02-11
- … 70 more at https://npm.io/package/react-tagsinput/versions

## README

# react-tagsinput

[![NPM version][npm-image]][npm-url]
[![Size][size-image]][size-url]
[![Code coverage][codecov-image]][codecov-url]
[![Download count][downloads-image]][downloads-url]
[![js-standard-style][standard-image]][standard-url]

Highly customizable [React](http://facebook.github.io/react/index.html) component for inputing tags.

![Demo](./example/demo.gif)

## Example

```javascript
import React from 'react'
import TagsInput from 'react-tagsinput'

import 'react-tagsinput/react-tagsinput.css'

class Example extends React.Component {
  constructor() {
    super()
    this.state = {tags: []}
  }

  handleChange = (tags) => {
    this.setState({tags})
  }

  render() {
    return <TagsInput value={this.state.tags} onChange={this.handleChange} />
  }
}
```

## Table of Contents

  * [Example](#example)
  * [Styling](#styling)
  * [Component Interface](#component-interface)
    * [Props](#props)
      * [value (required)](#value-required)
      * [onChange (required)](#onchange-required)
      * [onChangeInput](#onchangeinput)
      * [addKeys](#addkeys)
      * [currentValue](#currentvalue)
      * [inputValue](#inputvalue)
      * [onlyUnique](#onlyunique)
      * [validate](#validate)
      * [validationRegex](#validationregex)
      * [onValidationReject](#onvalidationreject)
      * [disabled](#disabled)
      * [maxTags](#maxtags)
      * [addOnBlur](#addonblur)
      * [addOnPaste](#addonpaste)
      * [pasteSplit](#pastesplit)
      * [removeKeys](#removekeys)
      * [tagProps](#tagprops)
      * [inputProps](#inputprops)
      * [renderTag](#rendertag)
      * [renderInput](#renderinput)
      * [renderLayout](#renderlayout)
      * [preventSubmit](#preventSubmit)
    * [Methods](#methods)
      * [focus()](#focus)
      * [blur()](#blur)
      * [accept()](#accept)
      * [addTag()](#addTag)
      * [clearInput()](#clearInput)
  * [Contributors](#contributors)
  * [Changelog](#changelog)
  * [License](#license)

## Styling

Look at [react-tagsinput.css](./react-tagsinput.css) for a basic style.

## Component Interface

### Props

##### value (required)

An array of tags.

##### onChange (required)

Callback when tags change, gets three arguments `tags` which is the new
tag array, `changed` which is an array of the tags that have changed and
`changedIndexes` which is an array of the indexes that have changed.

##### onChangeInput

Callback from the input box, gets one argument `value` which is the content of the input box.
(onChangeInput is only called if the input box is [controlled](https://facebook.github.io/react/docs/forms.html#controlled-components), for this to happen both inputValue and onChangeInput need to be set)

##### addKeys

An array of [keys](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) or [key codes](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which) that add a tag, default is `[9, 13]` (Tab and Enter).

##### currentValue

A string to set a value on the input.

##### inputValue

Similar to `currentValue` but needed for controlling the input box. (inputValue is only useful if you use it together with onChangeInput)

##### onlyUnique

Allow only unique tags, default is `false`.

##### validate

Allow only tags that pass this validation function. Gets one argument `tag` which is the tag to validate. Default is `() => true`.

##### validationRegex

Allow only tags that pass this regex to be added. Default is `/.*/`.

##### onValidationReject

Callback when tags are rejected through validationRegex, passing array of tags as the argument.

##### disabled

Passes the disabled prop to `renderInput` and `renderTag`, by default this
will "disable" the component.

##### maxTags

Allow limit number of tags, default is `-1` for infinite.

##### addOnBlur

Add a tag if input blurs. Default false.

##### addOnPaste

Add a tags if HTML5 paste on input. Default false.

##### pasteSplit

Function that splits pasted text. Default is:

```javascript
function defaultPasteSplit (data) {
  return data.split(' ').map(d => d.trim())
}
```

##### removeKeys

An array of key codes that remove a tag, default is `[8]` (Backspace).


##### className

Specify the wrapper className. Default is `react-tagsinput`.


##### focusedClassName

Specify the class to add to the wrapper when the component is focused. Default is `react-tagsinput--focused`.


##### tagProps

Props passed down to every tag component. Default is:
```javascript
{
  className: 'react-tagsinput-tag',
  classNameRemove: 'react-tagsinput-remove'
}
```

##### inputProps

Props passed down to input. Default is:

```javascript
{
  className: 'react-tagsinput-input',
  placeholder: 'Add a tag'
}
```

##### tagDisplayProp

The tags' property to be used when displaying/adding one. Default is: `null` which causes the tags to be an array of strings.

##### renderTag

Render function for every tag. Default is:

```javascript
function defaultRenderTag (props) {
  let {tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other} = props
  return (
    <span key={key} {...other}>
      {getTagDisplayValue(tag)}
      {!disabled &&
        <a className={classNameRemove} onClick={(e) => onRemove(key)} />
      }
    </span>
  )
}
```

##### renderInput

Render function for input. Default is:

```javascript
function defaultRenderInput (props) {
  let {onChange, value, addTag, ...other} = props
  return (
    <input type='text' onChange={onChange} value={value} {...other} />
  )
}
```

*Note: renderInput also receives `addTag` as a prop.*

##### renderLayout

Renders the layout of the component. Takes `tagElements` and `inputElement` as args. Default is:

```javascript
function defaultRenderLayout (tagElements, inputElement) {
  return (
    <span>
      {tagElements}
      {inputElement}
    </span>
  )
}
```

##### preventSubmit

A `boolean` to prevent the default submit event when adding an 'empty' tag.
Default: `true`

Set to `false` if you want the default submit to fire when pressing enter again after adding a tag.

### Methods

##### focus()

Focus on input element.

##### blur()

Blur input element.

##### accept()

Try to add whatever value is currently in input element.

##### addTag(tag)

Convenience method that adds a tag.

##### clearInput()

Clears the input value.

## Contributors

<a href="https://github.com/olahol/react-tagsinput/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=olahol/react-tagsinput" />
</a>


## [Changelog](./CHANGELOG.md)

## [License](./LICENSE)

---

[MIT Licensed](https://tldrlegal.com/license/mit-license)


[npm-image]: https://img.shields.io/npm/v/react-tagsinput.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-tagsinput
[downloads-image]: http://img.shields.io/npm/dm/react-tagsinput.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/react-tagsinput
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard-url]: https://github.com/feross/standard
[size-image]: https://img.badgesize.io/olahol/react-tagsinput/master/react-tagsinput.js.svg?style=flat-square
[size-url]: https://github.com/olahol/react-tagsinput/blob/master/react-tagsinput.js
[codecov-image]: https://img.shields.io/codecov/c/github/olahol/react-tagsinput?style=flat-square
[codecov-url]: https://app.codecov.io/github/olahol/react-tagsinput

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