react-input-tags

An input box with tags. Demo page

Install

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

OR

yarn add @derekedelaney/react-input-tags

Usage

import React, { Component } from 'react'

import InputTags from '@derekedelaney/react-input-tags'

class Example extends Component {
  render () {
    return (
      <InputTags
        tags={this.state.tags}
        keyCodes={[9, 13, 32, 188]}
        onDeleteTag={this.handleDeleteTag}
        onNewTag={this.handleNewTag}
        onInputChange={this.handleInputChange}
        onEmptyDelete={this.handleEmptyDelete}
        clearInputOnNewTag
        inputPlaceholderText="Type anything here"
      />
    )
  }
}

Options

• tags (array): An array of (objects) tags in the input box.
  • id (number or string): A unique value for each tag.
  • text (string): The text displayed in the tag.
• onDeleteTags (function) [(tag, index)]: A callback function when the delete button is clicked.
• keyCodes (array): An array of keyCodes that will trigger the tag events.
• onNewTag (function) [(value)]: A callback function when a key is pressed in the input box that matches one in the keyCodes array.
• onInputChange (function) [(value)]: A callback function when changes is detected in the input box.
• onEmptyDelete (function) [()]: A callback function when delete/backspace is pressed and the input box is empty.
• clearInputOnNewTag (bool) [false]: If true, the input box will clear after a new tag is added.
• inputPlaceholderText (string) [null]: A string to add to the inputs placeholder.
• borderClass (string) [null]: A className that can override the default styling for the border.
• tagContainerClass (string) [null]: A className that can override the default styling for the tag container.
• tagClass (string) [null]: A className that can override the default styling for the tag.
• closeClass (string) [null]: A className that can override the default styling for the close.
• tagInputClass (string) [null]: A className that can override the default styling for the tag input.

License

ISC © derekedelaney