@sentisis/react-tags-input
React input to create tags
Last updated 13 days ago by fjaguero .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @sentisis/react-tags-input 
SYNC missed versions from official npm registry.

React-Tags-Input

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

demo

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: <kbd>enter</kbd>, <kbd>esc</kbd>, <kbd>backspace</kbd>, <kbd>mod</kbd>+<kbd>a</kbd>, <kbd>mod</kbd>+<kbd>c</kbd> and <kbd>mod</kbd>+<kbd>v</kbd> (for copy/paste).

It supports a keyboard-only copy paste (using <kbd>mod</kbd>+<kbd>a</kbd>).

copy-paste-demo

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

Property Type Required Description
value String true Tag value
special Boolean false Special marks the tag as different. For example a special tag when using the case-sensitive options is a case-sensitive tag

The TagsInput component contains the following properties:

Property Type Default Description
tags Array<Tags> [] Array of tags to display
label String undefined Rendered above the field itself
placeholder String undefined Input placeholder
error String undefined Error message rendered below the field. When the field is set it will also have the class is-error
tagRenderer Function undefined Optional function that gets used to render the tag
copyButton Boolean false Renders a copy to clipboard button
copyButtonLabel String Copy to clipboard Label for the copy to clipboard button
blacklistChars Array<String> [','] Characters not allowed in the tags. Must always contain ,
specialTags Boolean false Enable the creation of special tags
specialButtonRenderer Function undefined Function that gets used to render the special button
specialButtonLabel String Special Label for the special button. Only used when a specialButtonRenderer is not defined
onChange Function noop Fired when changing the tags with the tags array as the argument
onBlur Function noop Fired as the standard React SyntheticEvent
onFocus Function noop Fired as the standard React SyntheticEvent
onSubmit Function noop Fired when the user interaction is considered complete, invoked with tags

Current Tags

  • 1.0.5                                ...           latest (13 days ago)

6 Versions

  • 1.0.5                                ...           13 days ago
  • 1.0.4                                ...           3 months ago
  • 1.0.3                                ...           3 months ago
  • 1.0.2                                ...           7 months ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 22
Last Day 0
Last Week 0
Last Month 6
Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |