control input box

Author: Ola Holmström

.gitignore

@@ -1,5 +1,4 @@
 .DS_Store
-components
 node_modules
 bower_components
 *.log

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 3.14.0 (2016-12-07)
+
+* Add `inputValue` and `onChangeInput` which allows control of input.
+
 ### 3.13.6 (2016-10-11)
 
 * Fix input focusing error.

README.md

@@ -19,12 +19,15 @@ Highly customizable [React](http://facebook.github.io/react/index.html) componen
     * [FAQ](#faq)
       * [How do I make the input dynamically grow in size?](#how-do-i-make-the-input-dynamically-grow-in-size)
       * [How do I add auto suggestion?](#how-do-i-add-auto-suggestion)
+      * [How do I control the value of the input box?](#how-do-i-control-the-value-of-the-input-box)
     * [Component Interface](#component-interface)
       * [Props](#props)
         * [value (required)](#value-required)
         * [onChange (required)](#onchange-required)
+        * [onChangeInput](#onchangeinput)
         * [addKeys](#addkeys)
         * [currentValue](#currentvalue)
+        * [inputValue](#inputvalue)
         * [onlyUnique](#onlyunique)
         * [validationRegex](#validationregex)
         * [disabled](#disabled)
@@ -42,6 +45,8 @@ Highly customizable [React](http://facebook.github.io/react/index.html) componen
         * [focus()](#focus)
         * [blur()](#blur)
         * [accept()](#accept)
+        * [addTag()](#addTag)
+        * [clearInput()](#clearInput)
     * [Styling](#styling)
     * [Contributors](#contributors)
     * [Changelog](#changelog)
@@ -123,7 +128,39 @@ function autosuggestRenderInput (props) {
 }
 ```
 
-A working example can be found in [`example/index.js`](https://github.com/olahol/react-tagsinput/blob/master/example/index.js#L137).
+A working example can be found in [`example/components/autocomplete.js`](https://github.com/olahol/react-tagsinput/blob/master/example/components/autocomplete.js).
+
+##### How do I control the value of the input box?
+
+Use `inputValue` and `onChangeInput`:
+
+```js
+class Example extends React.Component {
+  constructor() {
+    super()
+    this.state = {tags: [], tag: ''}
+  }
+
+  handleChange(tags) {
+    this.setState({tags})
+  }
+
+  handleChangeInput(tag) {
+    this.setState({tag})
+  }
+
+  render() {
+    return (
+      <TagsInput
+        value={this.state.tags}
+        onChange={::this.handleChange}
+        inputValue={this.state.tag}
+        onChangeInput={::this.handleChangeInput}
+      />
+    )
+  }
+}
+```
 
 ## Component Interface
 
@@ -139,6 +176,10 @@ Callback when tags change, gets three arguments `tags` which is the new
 tag array, `changed` which is an array of the tags that have changed and
 `changedIndexes` which is an array of the indexes that have changed.
 
+##### onChangeInput
+
+Callback from the input box, gets one argument `value` which is the content of the input box.
+
 ##### addKeys
 
 An array of key codes that add a tag, default is `[9, 13]` (Tab and Enter).
@@ -147,6 +188,10 @@ An array of key codes that add a tag, default is `[9, 13]` (Tab and Enter).
 
 A string to set a value on the input.
 
+##### inputValue
+
+Similar to `currentValue` but needed for controlling the input box.
+
 ##### onlyUnique
 
 Allow only unique tags, default is `false`.

bower.json

@@ -4,9 +4,9 @@
     "react-tagsinput.js",
     "react-tagsinput.css"
   ],
-  "version": "3.13.6",
+  "version": "3.14.0",
   "homepage": "https://github.com/olahol/react-tagsinput",
-  "description": "Simple react.js component for inputing tags",
+  "description": "Highly customizable React component for inputing tags",
   "keywords": [
     "react",
     "tags",

example/bundle.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import TagsInput from '../../src'
+
+class Example extends React.Component {
+  constructor () {
+    super()
+    this.state = {tags: [], tag: ''}
+  }
+
+  handleChange (tags) {
+    this.setState({tags})
+  }
+
+  handleInputChange (value) {
+    if (value.length > 2) {
+      return this.refs.tagsinput.accept()
+    }
+
+    this.setState({tag: value})
+  }
+
+  render () {
+    return (
+      <TagsInput
+        ref='tagsinput'
+        value={this.state.tags}
+        onChange={::this.handleChange}
+        inputValue={this.state.tag}
+        onChangeInput={::this.handleInputChange}
+      />
+    )
+  }
+}
+
+export default Example

example/components/autoadd.js

@@ -0,0 +1,112 @@
+import React from 'react'
+
+import TagsInput from '../../src'
+
+import Autosuggest from 'react-autosuggest'
+
+function states () {
+  return [
+    {abbr: 'AL', name: 'Alabama'},
+    {abbr: 'AK', name: 'Alaska'},
+    {abbr: 'AZ', name: 'Arizona'},
+    {abbr: 'AR', name: 'Arkansas'},
+    {abbr: 'CA', name: 'California'},
+    {abbr: 'CO', name: 'Colorado'},
+    {abbr: 'CT', name: 'Connecticut'},
+    {abbr: 'DE', name: 'Delaware'},
+    {abbr: 'FL', name: 'Florida'},
+    {abbr: 'GA', name: 'Georgia'},
+    {abbr: 'HI', name: 'Hawaii'},
+    {abbr: 'ID', name: 'Idaho'},
+    {abbr: 'IL', name: 'Illinois'},
+    {abbr: 'IN', name: 'Indiana'},
+    {abbr: 'IA', name: 'Iowa'},
+    {abbr: 'KS', name: 'Kansas'},
+    {abbr: 'KY', name: 'Kentucky'},
+    {abbr: 'LA', name: 'Louisiana'},
+    {abbr: 'ME', name: 'Maine'},
+    {abbr: 'MD', name: 'Maryland'},
+    {abbr: 'MA', name: 'Massachusetts'},
+    {abbr: 'MI', name: 'Michigan'},
+    {abbr: 'MN', name: 'Minnesota'},
+    {abbr: 'MS', name: 'Mississippi'},
+    {abbr: 'MO', name: 'Missouri'},
+    {abbr: 'MT', name: 'Montana'},
+    {abbr: 'NE', name: 'Nebraska'},
+    {abbr: 'NV', name: 'Nevada'},
+    {abbr: 'NH', name: 'New Hampshire'},
+    {abbr: 'NJ', name: 'New Jersey'},
+    {abbr: 'NM', name: 'New Mexico'},
+    {abbr: 'NY', name: 'New York'},
+    {abbr: 'NC', name: 'North Carolina'},
+    {abbr: 'ND', name: 'North Dakota'},
+    {abbr: 'OH', name: 'Ohio'},
+    {abbr: 'OK', name: 'Oklahoma'},
+    {abbr: 'OR', name: 'Oregon'},
+    {abbr: 'PA', name: 'Pennsylvania'},
+    {abbr: 'RI', name: 'Rhode Island'},
+    {abbr: 'SC', name: 'South Carolina'},
+    {abbr: 'SD', name: 'South Dakota'},
+    {abbr: 'TN', name: 'Tennessee'},
+    {abbr: 'TX', name: 'Texas'},
+    {abbr: 'UT', name: 'Utah'},
+    {abbr: 'VT', name: 'Vermont'},
+    {abbr: 'VA', name: 'Virginia'},
+    {abbr: 'WA', name: 'Washington'},
+    {abbr: 'WV', name: 'West Virginia'},
+    {abbr: 'WI', name: 'Wisconsin'},
+    {abbr: 'WY', name: 'Wyoming'}
+  ]
+}
+
+class AutocompleteExample extends React.Component {
+  constructor () {
+    super()
+    this.state = {tags: []}
+  }
+
+  handleChange (tags) {
+    this.setState({tags})
+  }
+
+  render () {
+    const autocompleteRenderInput = (props) => {
+      const {addTag, ...other} = props
+
+      const handleOnChange = (e, {newValue, method}) => {
+        if (method === 'enter') {
+          e.preventDefault()
+        } else {
+          props.onChange(e)
+        }
+      }
+
+			const inputValue = (props.value && props.value.trim().toLowerCase()) || ''
+			const inputLength = inputValue.length
+
+      let {tags} = this.state
+      let suggestions = states().filter((state) => {
+				return state.name.toLowerCase().slice(0, inputLength) === inputValue
+      })
+
+      return (
+        <Autosuggest
+          ref={props.ref}
+          suggestions={suggestions}
+          shouldRenderSuggestions={(value) => value && value.trim().length > 0}
+          getSuggestionValue={(suggestion) => suggestion.name}
+          renderSuggestion={(suggestion) => <span>{suggestion.name}</span>}
+          inputProps={{...other, onChange: handleOnChange}}
+          onSuggestionSelected={(e, {suggestion}) => {
+            props.addTag(suggestion.name)
+          }}
+        />
+      )
+    }
+
+    return <TagsInput renderInput={autocompleteRenderInput} value={this.state.tags} onChange={::this.handleChange} />
+  }
+}
+
+
+export default AutocompleteExample

example/components/autocomplete.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import TagsInput from '../../src'
+
+import AutosizeInput from 'react-input-autosize'
+
+class AutosizeExample extends React.Component {
+  constructor () {
+    super()
+    this.state = {tags: []}
+  }
+
+  handleChange (tags) {
+    this.setState({tags})
+  }
+
+  render () {
+    function autosizingRenderInput (props) {
+      let {onChange, value, addTag, ...other} = props
+      return (
+        <AutosizeInput type='text' onChange={onChange} value={value} {...other} />
+      )
+    }
+
+    return <TagsInput renderInput={autosizingRenderInput} value={this.state.tags} onChange={::this.handleChange} />
+  }
+}
+
+export default AutosizeExample

example/components/autosize.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import TagsInput from '../../src'
+
+class EmailExample extends React.Component {
+  constructor () {
+    super()
+    this.state = {tags: []}
+  }
+
+  handleChange (tags) {
+    this.setState({tags})
+  }
+
+  render () {
+    var EMAIL_VALIDATION_REGEX = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i
+
+    return (
+			<TagsInput
+				value={this.state.tags}
+				addKeys={[9, 13, 32, 186, 188]} // tab, enter, space, semicolon, comma
+				onlyUnique={true}
+				addOnPaste={true}
+				validationRegex={EMAIL_VALIDATION_REGEX}
+				pasteSplit={data => {
+					return data.replace(/[\r\n,;]/g, ' ').split(' ').map(d => d.trim())
+				}}
+				onChange={::this.handleChange}
+			/>
+    )
+  }
+}
+
+export default EmailExample;

example/components/email.js

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import TagsInput from '../../src'
+
+class FormExample extends React.Component {
+  constructor () {
+    super()
+    this.state = {tags: []}
+  }
+
+  handleChange (tags) {
+    this.setState({tags})
+  }
+
+  render () {
+    return (
+      <form>
+        <TagsInput name='form' value={this.state.tags} onChange={::this.handleChange} onlyUnique />
+      </form>
+    )
+  }
+}
+
+export default FormExample