<commit_before># react-tagsinput

[![npm version](https://badge.fury.io/js/react-tagsinput.svg)](http://badge.fury.io/js/react-tagsinput)
[![Build Status](https://travis-ci.org/olahol/react-tagsinput.svg)](https://travis-ci.org/olahol/react-tagsinput)
[![Coverage Status](https://img.shields.io/coveralls/olahol/react-tagsinput.svg?style=flat)](https://coveralls.io/r/olahol/react-tagsinput)
[![Dependency Status](https://david-dm.org/olahol/react-tagsinput.svg)](https://david-dm.org/olahol/react-tagsinput)
[![Download Count](https://img.shields.io/npm/dm/react-tagsinput.svg?style=flat)](https://www.npmjs.com/package/react-tagsinput)

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

### [Demo](https://olahol.github.io/react-tagsinput)

[![Demo](https://cdn.rawgit.com/olahol/react-tagsinput/master/example/demo.gif "Demo")](https://github.com/olahol/react-tagsinput/blob/master/example/index.html)

## Install

```bash
npm install react-tagsinput --save
```

or

```bash
bower install react-tagsinput --save
```

## Example

Controlled usage:

```javascript
var TagsInput = require('react-tagsinput');

var App = React.createClass({
  mixins: [React.addons.LinkedStateMixin],

  getInitialState: function () {
    return { tags: [] };
  },

  saveTags: function () {
    console.log('tags: ', this.refs.tags.getTags().join(', '));
  },

  render: function () {
    return (
      <div>
        <TagsInput ref='tags' valueLink={this.linkState('tags')} />
        <button onClick={this.saveTags}>Save</button>
      </div>
    );
  }
});
```

Uncontrolled usage:

```javascript
var TagsInput = require('react-tagsinput');

var App = React.createClass({
  saveTags: function () {
    console.log('tags: ', this.refs.tags.getTags().join(', '));
  },

  render: function () {
    return (
      <div>
        <TagsInput ref='tags' />
        <button onClick={this.saveTags}>Save</button>
      </div>
    );
  }
});
```

More examples in `example/`.

## API

### Props

##### value

An array of tags. This prop or `valueLink` is required.

##### valueLink

A ReactLink object.

##### defaultValue

Initialize the component with a value. This is only used when `value` is `null`
(i.e when the component is uncontrolled.)

##### placeholder

Placeholder text for the add a tag input, default is "Add a tag".

##### classNames

An object of classnames for elements in the component. The default is:

```javascript
{
  div: "react-tagsinput"
  , input: "react-tagsinput-input"
  , invalid: "react-tagsinput-invalid"
  , validating: "react-tagsinput-validating"
  , tag: "react-tagsinput-tag"
  , remove: "react-tagsinput-remove"
}
```

Useful if you need specific CSS classes.

##### classNamespace

Namespace for CSS classes, default is `react` i.e CSS classes are `react-tagsinput`.

##### addOnBlur

Boolean whether a tag should be added when the input field blurs, default
is `true`.

##### validate or validateAsync

A function which returns true if a tag is valid, default function returns
true for non-empty strings and unique tags. The validation is asynchronous
if the `validate` function takes two arguments `tag` and a callback `cb` or if
the prop `validateAsync` is set. `validateAsync` is always asynchronous and
takes two arguments `tag` and `cb`.

##### transform

A function which transforms a tag before it is added, the default
function trims the tag of whitespaces.

##### addKeys

An array of key codes that add a tag, default is `[9, 13]` (Tab and Enter).

##### removeKeys

An array of key codes that remove a tag, default is `[8]` (Backspace).<commit_msg>README: added new property to documentation<commit_after># react-tagsinput

[![npm version](https://badge.fury.io/js/react-tagsinput.svg)](http://badge.fury.io/js/react-tagsinput)
[![Build Status](https://travis-ci.org/olahol/react-tagsinput.svg)](https://travis-ci.org/olahol/react-tagsinput)
[![Coverage Status](https://img.shields.io/coveralls/olahol/react-tagsinput.svg?style=flat)](https://coveralls.io/r/olahol/react-tagsinput)
[![Dependency Status](https://david-dm.org/olahol/react-tagsinput.svg)](https://david-dm.org/olahol/react-tagsinput)
[![Download Count](https://img.shields.io/npm/dm/react-tagsinput.svg?style=flat)](https://www.npmjs.com/package/react-tagsinput)

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

### [Demo](https://olahol.github.io/react-tagsinput)

[![Demo](https://cdn.rawgit.com/olahol/react-tagsinput/master/example/demo.gif "Demo")](https://github.com/olahol/react-tagsinput/blob/master/example/index.html)

## Install

```bash
npm install react-tagsinput --save
```

or

```bash
bower install react-tagsinput --save
```

## Example

Controlled usage:

```javascript
var TagsInput = require('react-tagsinput');

var App = React.createClass({
  mixins: [React.addons.LinkedStateMixin],

  getInitialState: function () {
    return { tags: [] };
  },

  saveTags: function () {
    console.log('tags: ', this.refs.tags.getTags().join(', '));
  },

  render: function () {
    return (
      <div>
        <TagsInput ref='tags' valueLink={this.linkState('tags')} />
        <button onClick={this.saveTags}>Save</button>
      </div>
    );
  }
});
```

Uncontrolled usage:

```javascript
var TagsInput = require('react-tagsinput');

var App = React.createClass({
  saveTags: function () {
    console.log('tags: ', this.refs.tags.getTags().join(', '));
  },

  render: function () {
    return (
      <div>
        <TagsInput ref='tags' />
        <button onClick={this.saveTags}>Save</button>
      </div>
    );
  }
});
```

More examples in `example/`.

## API

### Props

##### value

An array of tags. This prop or `valueLink` is required.

##### valueLink

A ReactLink object.

##### defaultValue

Initialize the component with a value. This is only used when `value` is `null`
(i.e when the component is uncontrolled.)

##### placeholder

Placeholder text for the add a tag input, default is "Add a tag".

##### classNames

An object of classnames for elements in the component. The default is:

```javascript
{
  div: "react-tagsinput"
  , input: "react-tagsinput-input"
  , invalid: "react-tagsinput-invalid"
  , validating: "react-tagsinput-validating"
  , tag: "react-tagsinput-tag"
  , remove: "react-tagsinput-remove"
}
```

Useful if you need specific CSS classes.

##### classNamespace

Namespace for CSS classes, default is `react` i.e CSS classes are `react-tagsinput`.

##### addOnBlur

Boolean whether a tag should be added when the input field blurs, default
is `true`.

##### validate or validateAsync

A function which returns true if a tag is valid, default function returns
true for non-empty strings and unique tags. The validation is asynchronous
if the `validate` function takes two arguments `tag` and a callback `cb` or if
the prop `validateAsync` is set. `validateAsync` is always asynchronous and
takes two arguments `tag` and `cb`.

##### transform

A function which transforms a tag before it is added, the default
function trims the tag of whitespaces.

##### renderTag

A function which allow to use custom components for rendering tag.

##### addKeys

An array of key codes that add a tag, default is `[9, 13]` (Tab and Enter).

##### removeKeys

An array of key codes that remove a tag, default is `[8]` (Backspace).
{'fraction_non_alphanumeric': 0.15798067764321677, 'fraction_numerical': 0.0010885834807456798, 'mean_word_length': 4.068965517241379, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 25, 'https://': 24, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6376952', 'n_tokens_mistral': 2440, 'n_tokens_neox': 2336, 'n_words': 636}