Skip to content
A simple react component for inputing tags.
CSS
Branch: master
Clone or download
Pull request Compare This branch is 190 commits behind olahol:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.editorconfig
.gitignore
.jshintrc
.npmignore
CHANGELOG.md
README.md
bower.json
package.json
react-tagsinput.css
react-tagsinput.js

README.md

react-tagsinput

Simple React component for inputing tags.

Demo

Install

npm install react-tagsinput --save

or

bower install react-tagsinput --save

Example

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" tags={["tag1", "tag2"]} />
        <button onClick={this.saveTags}>Save</button>
      </div>
    );
  }
});

API

Props

tags

Tags to preloaded, default is [].

placeholder

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

validate

A function which returns true if a tag is valid, default function returns true for every string but the empty string.

addKeys

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

onChange

Callback when the tag input changes, the argument is an array of the current tags.

onTagAdd

Callback when a tag is added, argument is the added tag.

onTagRemove

Callback when a tag is removed, argument is the removed tag.

Methods

getTags()

Returns an array of the current tags.

Styles

Look at react-tagsinput.css for an idea on how to style this component.


MIT Licensed

You can’t perform that action at this time.