Fix examples and update readme.

Author: Ola Holmström

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 3.14.1 (2017-02-11)
+
+* Update README and fix examples.
+
 ### 3.14.0 (2016-12-07)
 
 * Add `inputValue` and `onChangeInput` which allows control of input.

README.md

@@ -97,7 +97,7 @@ class Example extends React.Component {
 Install [`react-input-autosize`](https://github.com/JedWatson/react-input-autosize) and change the `renderInput` prop to:
 
 ```js
-function autosizingRenderInput (props) {
+function autosizingRenderInput ({addTag, ...props}) {
   let {onChange, value, ...other} = props
   return (
     <AutosizeInput type='text' onChange={onChange} value={value} {...other} />
@@ -111,24 +111,42 @@ Use [`react-autosuggest`](https://github.com/moroshko/react-autosuggest) and cha
 something like:
 
 ```js
-function autosuggestRenderInput (props) {
+function autosuggestRenderInput ({addTag, ...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 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={props}
+      inputProps={{...props, onChange: handleOnChange}}
       onSuggestionSelected={(e, {suggestion}) => {
-        this.refs.tagsinput.addTag(suggestion.name)
+        addTag(suggestion.name)
       }}
+      onSuggestionsClearRequested={() => {}}
+      onSuggestionsFetchRequested={() => {}}
     />
   )
 }
 ```
 
-A working example can be found in [`example/components/autocomplete.js`](https://github.com/olahol/react-tagsinput/blob/master/example/components/autocomplete.js).
+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?
 

example/bundle.js

@@ -70,9 +70,7 @@ class AutocompleteExample extends React.Component {
   }
 
   render () {
-    const autocompleteRenderInput = (props) => {
-      delete props.addTag
-
+    function autocompleteRenderInput ({addTag, ...props}) {
       const handleOnChange = (e, {newValue, method}) => {
         if (method === 'enter') {
           e.preventDefault()
@@ -97,9 +95,9 @@ class AutocompleteExample extends React.Component {
           renderSuggestion={(suggestion) => <span>{suggestion.name}</span>}
           inputProps={{...props, onChange: handleOnChange}}
           onSuggestionSelected={(e, {suggestion}) => {
-            props.addTag(suggestion.name)
+            addTag(suggestion.name)
           }}
-          onSuggestionsClearRequested={() => this.setState({tags: []})}
+          onSuggestionsClearRequested={() => {}}
           onSuggestionsFetchRequested={() => {}}
         />
       )

example/components/autocomplete.js

@@ -15,8 +15,8 @@ class AutosizeExample extends React.Component {
   }
 
   render () {
-    function autosizingRenderInput (props) {
-      let {onChange, value, addTag, ...other} = props
+    function autosizingRenderInput ({addTag, ...props}) {
+      let {onChange, value, ...other} = props
       return (
         <AutosizeInput type='text' onChange={onChange} value={value} {...other} />
       )

example/components/autosize.js

@@ -13,22 +13,22 @@ class EmailExample extends React.Component {
   }
 
   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
+    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}
-			/>
+      <TagsInput
+        value={this.state.tags}
+        addKeys={[9, 13, 32, 186, 188]} // tab, enter, space, semicolon, comma
+        onlyUnique
+        addOnPaste
+        validationRegex={EMAIL_VALIDATION_REGEX}
+        pasteSplit={data => {
+          return data.replace(/[\r\n,;]/g, ' ').split(' ').map(d => d.trim())
+        }}
+        onChange={::this.handleChange}
+      />
     )
   }
 }
 
-export default EmailExample;
+export default EmailExample

example/components/email.js

@@ -1,6 +1,6 @@
 {
   "name": "react-tagsinput",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "description": "Highly customizable React component for inputing tags",
   "main": "react-tagsinput.js",
   "peerDependencies": {
@@ -16,11 +16,9 @@
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.8.0",
-    "css-loader": "^0.26.1",
     "isparta": "^4.0.0",
     "jsdom": "^7.0.2",
     "mocha": "^2.3.3",
-    "postcss-loader": "^1.2.2",
     "react": "15.x.x",
     "react-addons-test-utils": "^15.0.0",
     "react-autosuggest": "^8.0.0",

package.json

@@ -180,7 +180,9 @@ class TagsInput extends React.Component {
 
     if (onlyUnique) {
       tags = uniq(tags)
-      tags = tags.filter(tag => value.every(currentTag => this._getTagDisplayValue(currentTag) !== this._getTagDisplayValue(tag)))
+      tags = tags.filter(tag => value.every(currentTag =>
+        this._getTagDisplayValue(currentTag) !== this._getTagDisplayValue(tag))
+      )
     }
 
     tags = tags.filter(tag => validationRegex.test(this._getTagDisplayValue(tag)))