@sentisis/react-tags-input v1.0.6

React-Tags-Input

An input control that handles tags interaction with copy-paste and custom type support.

Live Playground

For examples of the tags input in action, check the demo page

Installation

The easiest way to use it is by installing it from NPM and include it in your own React build process.

npm install @sentisis/react-tags-input --save

Usage

Example usage:

import React from 'react';
import TagsInput from '@sentisis/react-tags-input';
// Either a copy of our demo CSS or your custom one
import './TagsInput.css';

export default class Demo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      tags: [],
    };
  }

  render() {
    return (
      <TagsInput
        label="Tags"
        placeholder="Write tags"
        tags={this.state.tags}
        onChange={tags => this.setState({ tags })}
      />
    );
  }
}

API

Currently the component listen to the following keys: enter, esc, backspace, mod+a, mod+c and mod+v (for copy/paste).

It supports a keyboard-only copy paste (using mod+a).

Each tag you will be passing should have the following shape:

The TagsInput component contains the following properties: