README

Tag-Input (with React)

A react component that renders an input field. When hitting enter or entering a comma, the value will be used to create a tag. Tags are displayed in front of the input.

Demo

Install

Install as node dependency:

npm install tag-input --save

Quickstart

To test locally change to node_modules/tag-input and run:

npm start & npm run watch

Commands

npm run build - build production css and js
npm run watch - compile css and js
npm run watch:test - run tests on change
npm start - start static dev server
npm test - run lint and tests

Usage

Version 2.x
Version 1.3 (deprecated)

Version 2.x

The userInput and tags states have been removed in order to make it the componetn reusable in situations where it was used as a child component. In order to make use of this component a parent component is required. The parent component manages the userInput and tags state. It listens to changes and re-renderers the tag-inputcomponent. Have a look at the following example:

'use strict';

var React = require('react');
var tagInputComponent = require('../');

var tagInputContainer = React.createClass({
  getInitialState: function () {
    return {
      userInput: '',
      tags: []
    };
  },
  render: function () {
    var self = this;
    return (
      React.DOM.div(null, React.createElement(tagInputComponent, {
        userInput: self.state.userInput,
        tags: self.state.tags,
        onInputChange: function (input) {
          self.setState({ userInput: input });
        },
        onTagChange: function (tags) {
          self.setState({ tags: tags });
          // save the tags here
        }
      }))
    );
  }
});

React.render(React.createElement(tagInputContainer),
  document.querySelector('#content'));

Version 1.3

var React = require('react');
var tagInput = require('tag-input');

React.render(React.createElement(tagInput),
  document.querySelector('#content'));

Component Props

onInputChange: called whenever the input value is changed.
onTagChange: called when a tag is added or removed. Called with tags array.
minTagLength: Set the minimum character length of a tag. Default is 3.
cssClass: optional css class for container
tags: array of strings that represent the tags
userInput: the value of the input

License

MIT

Usage no npm install needed!