An input box with tags. Demo page
npm install --save @derekedelaney/react-input-tagsOR
yarn add @derekedelaney/react-input-tagsimport 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"
/>
)
}
}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]: Iftrue, 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.
ISC © derekedelaney