You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
react-tag-autocomplete
Advanced tools
react-tag-autocomplete - npm Package Compare versions
Comparing version 5.10.0 to 6.0.0-beta.0
| # Changelog | ||
| ## 6.0.0 | ||
| - Added `clearInput` method to programmatically clear input text | ||
| - Added `suggestionComponent` option to allow the rendering of a custom suggestion component ([tjphopkins](https://github.com/tjphopkins)) | ||
| - Added `searchWrapper` to `classNames` option | ||
| - Added ES6 package and `"module"` entry point | ||
| - Added `id` option to configure the component ID | ||
| - Added `removeButtonText` option to configure the selected tag remove button title attribute | ||
| - Refactored `placeholder` option to `placeholderText` to match other text options | ||
| - Refactored keyboard event handlers to use `KeyboardEvent.key` | ||
| - Refactored event handlers and callbacks to use `on` prefixes | ||
| - Refactored `classNames` option to avoid creating new and merging objects for each top-level props change | ||
| - Refactored `deleteTag` method so it no longer clears the input text when a tag is removed | ||
| - Removed `clearInputOnDelete` option | ||
| - Removed `autofocus` option | ||
| - Removed `delimiterChars` option | ||
| - Updated React dependency to 16.5+ | ||
| ## 5.10.0 | ||
@@ -4,0 +22,0 @@ |
| { | ||
| "name": "react-tag-autocomplete", | ||
| "version": "5.10.0", | ||
| "version": "6.0.0-beta.0", | ||
| "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.", | ||
| "main": "dist-es5/ReactTags.js", | ||
| "jsnext:main": "dist-es6/ReactTags.js", | ||
| "main": "dist/ReactTags.cjs.js", | ||
| "module": "dist/ReactTags.esm.js", | ||
| "browser": "dist/ReactTags.umd.js", | ||
| "scripts": { | ||
| "pretest": "npm run lint && npm run build:es5", | ||
| "prepare": "npm run build", | ||
| "prepublish": "npm run build", | ||
| "pretest": "npm run lint && npm run build", | ||
| "lint": "standard lib/*.js spec/*.js", | ||
| "test": "jasmine", | ||
| "coverage": "nyc --include 'dist-es5/**' npm test", | ||
| "lint": "standard lib/*.js spec/*.js", | ||
| "dev": "webpack-dev-server --progress --env.NODE_ENV=development", | ||
| "build:example": "webpack -p --env.NODE_ENV=production --config-name example", | ||
| "build:es5": "buble lib --objectAssign -o dist-es5", | ||
| "build:es6": "buble lib --objectAssign -o dist-es6 -t node:6", | ||
| "prepare": "npm run build:es5 && npm run build:es6" | ||
| "dev": "NODE_ENV=development rollup -c example/rollup.config.js --watch", | ||
| "example": "NODE_ENV=production rollup -c example/rollup.config.js", | ||
| "build": "rollup -c rollup.config.js" | ||
| }, | ||
@@ -41,13 +42,10 @@ "keywords": [ | ||
| "peerDependencies": { | ||
| "prop-types": "^15.0.0", | ||
| "react": "^15.0.0 || ^16.0.0", | ||
| "react-dom": "^15.0.0 || ^16.0.0" | ||
| "prop-types": "^15.5.0", | ||
| "react": "^16.5.0", | ||
| "react-dom": "^16.5.0" | ||
| }, | ||
| "devDependencies": { | ||
| "buble": "^0.17.0", | ||
| "buble-loader": "^0.4.1", | ||
| "coveralls": "^3.0.0", | ||
| "jasmine": "^3.3.0", | ||
| "jsdom": "^14.0.0", | ||
| "keycode": "^2.1.2", | ||
| "nyc": "^13.3.0", | ||
@@ -57,7 +55,15 @@ "prop-types": "^15.7.0", | ||
| "react-dom": "^16.8.0", | ||
| "rollup": "^1.7.0", | ||
| "rollup-plugin-buble": "^0.19.6", | ||
| "rollup-plugin-commonjs": "^9.2.0", | ||
| "rollup-plugin-node-resolve": "^4.0.0", | ||
| "rollup-plugin-replace": "^2.1.0", | ||
| "rollup-plugin-serve": "^1.0.0", | ||
| "rollup-plugin-uglify": "^6.0.0", | ||
| "sinon": "^7.3.0", | ||
| "standard": "^12.0.1", | ||
| "webpack": "^3.6.0", | ||
| "webpack-dev-server": "^2.8.2" | ||
| "standard": "^12.0.0" | ||
| }, | ||
| "engines": { | ||
| "node": ">= 8.15.0" | ||
| } | ||
| } |
107
README.md
@@ -23,2 +23,3 @@ # React Tag Autocomplete | ||
| const React = require('react') | ||
| const ReactDOM = require('react-dom') | ||
| const ReactTags = require('react-tag-autocomplete') | ||
@@ -44,3 +45,3 @@ | ||
| handleDelete (i) { | ||
| onDelete (i) { | ||
| const tags = this.state.tags.slice(0) | ||
@@ -51,3 +52,3 @@ tags.splice(i, 1) | ||
| handleAddition (tag) { | ||
| onAddition (tag) { | ||
| const tags = [].concat(this.state.tags, tag) | ||
@@ -62,4 +63,4 @@ this.setState({ tags }) | ||
| suggestions={this.state.suggestions} | ||
| handleDelete={this.handleDelete.bind(this)} | ||
| handleAddition={this.handleAddition.bind(this)} /> | ||
| onDelete={this.onDelete.bind(this)} | ||
| onAddition={this.onAddition.bind(this)} /> | ||
| ) | ||
@@ -69,3 +70,3 @@ } | ||
| React.render(<App />, document.getElementById('app')) | ||
| ReactDOM.render(<App />, document.getElementById('app')) | ||
| ``` | ||
@@ -75,26 +76,29 @@ | ||
| - [`id`](#id-optional) | ||
| - [`tags`](#tags-optional) | ||
| - [`suggestions`](#suggestions-optional) | ||
| - [`suggestionsFilter`](#suggestionsFilter-optional) | ||
| - [`placeholder`](#placeholder-optional) | ||
| - [`autofocus`](#autofocus-optional) | ||
| - [`placeholderText`](#placeholderText-optional) | ||
| - [`removeButtonText`](#removeButtonText-optional) | ||
| - [`autoresize`](#autoresize-optional) | ||
| - [`delimiters`](#delimiters-optional) | ||
| - [`delimiterChars`](#delimitersChars-optional) | ||
| - [`minQueryLength`](#minquerylength-optional) | ||
| - [`maxSuggestionsLength`](#maxsuggestionslength-optional) | ||
| - [`classNames`](#classnames-optional) | ||
| - [`handleAddition`](#handleaddition-optional) | ||
| - [`handleDelete`](#handledelete-optional) | ||
| - [`handleInputChange`](#handleinputchange-optional) | ||
| - [`handleFocus`](#handlefocus-optional) | ||
| - [`handleBlur`](#handleblur-optional) | ||
| - [`handleValidate`](#handlevalidate-optional) | ||
| - [`onAddition`](#onaddition-optional) | ||
| - [`onDelete`](#ondelete-optional) | ||
| - [`onInput`](#oninput-optional) | ||
| - [`onFocus`](#onfocus-optional) | ||
| - [`onBlur`](#onblur-optional) | ||
| - [`onValidate`](#onvalidate-optional) | ||
| - [`addOnBlur`](#addonblur-optional) | ||
| - [`allowNew`](#allownew-optional) | ||
| - [`allowBackspace`](#allowbackspace-optional) | ||
| - [`clearInputOnDelete`](#clearinputondelete-optional) | ||
| - [`tagComponent`](#tagcomponent-optional) | ||
| - [`inputAttributes`](#inputAttributes-optional) | ||
| #### id (optional) | ||
| The ID attribute given to the listbox element. Default: `ReactTags`. | ||
| #### tags (optional) | ||
@@ -130,9 +134,9 @@ | ||
| #### placeholder (optional) | ||
| #### placeholderText (optional) | ||
| The placeholder string shown for the input. Default: `'Add new tag'`. | ||
| The input placeholder text displayed when no text has been entered. Default: `'Add new tag'`. | ||
| #### autofocus (optional) | ||
| #### removeButtonText (optional) | ||
| Boolean parameter to control whether the text-input should be autofocused on mount. Default: `true`. | ||
| The title text to add to the remove selected tag button. Default `'Click to remove tag'`. | ||
@@ -145,8 +149,4 @@ #### autoresize (optional) | ||
| Array of integers matching keyboard event `keyCode` values. When a corresponding key is pressed, the preceding string is finalised as tag. Default: `[9, 13]` (Tab and return keys). | ||
| Array of keys matching keyboard event `key` values. When a corresponding key is pressed, the preceding string is finalised as tag. Default: `['Enter', 'Tab']`. | ||
| #### delimiterChars (optional) | ||
| Array of characters matching keyboard event `key` values. This is useful when needing to support a specific character irrespective of the keyboard layout. Note, that this list is separate from the one specified by the `delimiters` option, so you'll need to set the value there to `[]`, if you wish to disable those keys. Example usage: `delimiterChars={[',', ' ']}`. Default: `[]` | ||
| #### minQueryLength (optional) | ||
@@ -172,2 +172,3 @@ | ||
| search: 'react-tags__search', | ||
| searchWrapper: 'react-tags__search-wrapper', | ||
| searchInput: 'react-tags__search-input', | ||
@@ -180,3 +181,3 @@ suggestions: 'react-tags__suggestions', | ||
| #### handleAddition (required) | ||
| #### onAddition (required) | ||
@@ -186,3 +187,3 @@ Function called when the user wants to add a tag. Receives the tag. | ||
| ```js | ||
| function handleAddition(tag) { | ||
| function onAddition(tag) { | ||
| // Add the tag { id, name } to the tag list | ||
@@ -193,3 +194,3 @@ tags.push(tag) | ||
| #### handleDelete (required) | ||
| #### onDelete (required) | ||
@@ -199,3 +200,3 @@ Function called when the user wants to delete a tag. Receives the tag index. | ||
| ```js | ||
| function handleDelete(i) { | ||
| function onDelete(i) { | ||
| // Delete the tag at index i | ||
@@ -206,3 +207,3 @@ tags.splice(i, 1) | ||
| #### handleInputChange (optional) | ||
| #### onInput (optional) | ||
@@ -212,3 +213,3 @@ Optional event handler when the input changes. Receives the current input value. | ||
| ```js | ||
| function handleInputChange(input) { | ||
| function onInput(input) { | ||
| if (!this.state.busy) { | ||
@@ -224,11 +225,11 @@ this.setState({ busy: true }) | ||
| #### handleFocus (optional) | ||
| #### onFocus (optional) | ||
| Optional event handler when the input receives focus. Receives no arguments. | ||
| #### handleBlur (optional) | ||
| #### onBlur (optional) | ||
| Optional event handler when focus on the input is lost. Receives no arguments. | ||
| #### handleValidate (optional) | ||
| #### onValidate (optional) | ||
@@ -238,3 +239,3 @@ Optional validation function that determines if tag should be added to tags. Receives a tag object. Should return a boolean. | ||
| ```js | ||
| function handleValidate(tag) { | ||
| function onValidate(tag) { | ||
| return tag.name.length >= 5; | ||
@@ -256,6 +257,2 @@ } | ||
| #### clearInputOnDelete (optional) | ||
| Clear the text input when a tag is deleted. Default: `true`. | ||
| #### tagComponent (optional) | ||
@@ -265,2 +262,6 @@ | ||
| #### suggestionComponent (optional) | ||
| Provide a custom suggestion component to render. Default: `null`. | ||
| #### inputAttributes (optional) | ||
@@ -272,2 +273,10 @@ | ||
| ### API | ||
| #### addTag(tag) | ||
| #### deleteTag(index) | ||
| #### clearInput() | ||
| ### Styling | ||
@@ -279,11 +288,23 @@ | ||
| The component is written in ES6 and uses [Webpack](http://webpack.github.io/) as its build tool. | ||
| The component is written in ES6 and uses [Rollup](https://rollupjs.org/) as its build tool. Tests are written with [Jasmine](https://jasmine.github.io/) using [JSDOM](https://github.com/jsdom/jsdom). | ||
| ``` | ||
| ```sh | ||
| npm install | ||
| npm run dev # open http://localhost:8080 | ||
| npm run dev # will open http://localhost:8080 and watch files for changes | ||
| ``` | ||
| ### Upgrading from 4.x to 5.x | ||
| ### Upgrading | ||
| To see all changes refer to [the changelog](CHANGELOG.md). | ||
| #### Upgrading from 5.x to 6.x | ||
| - React 16.3 or above is now required. | ||
| - Event handlers and callbacks have been renamed to use `on` prefixes, e.g. the `handleAddition()` callback should now be called `onAddition()`. | ||
| - The `delimiters` option is now an array of `KeyboardEvent.key` values and not `KeyboardEvent.keyCode` codes, e.g. `[13, 9]` should now be written as `['Enter', 'Tab']`. See https://keycode.info/ for more information. | ||
| - The `delimiterChars` option has been removed, use the `delimiters` option instead. | ||
| - The `autofocus` option has been removed. | ||
| #### Upgrading from 4.x to 5.x | ||
| 1. The `delimiters` option has been removed, any references to this will now be ignored. | ||
@@ -314,3 +335,1 @@ 2. The `classNames` option has been updated: | ||
| ``` | ||
| For smaller changes refer to [the changelog](CHANGELOG.md). |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
55601
4.82%- Number of lines in readme file
314
6.44%Worsened metrics
- Dev dependency count
16
14.29%- Number of package files
7
-56.25%- Lines of code
1086
-1.36%- Number of low quality alerts
2
100%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes