npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

@sentisis/react-tags-input

1.0.4 • Public • Published

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

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

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

install

npm i @sentisis/react-tags-input

Downloadsweekly downloads

117

version

1.0.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability