Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-tag-input
Advanced tools
react-tag-input - npm Package Compare versions
Comparing version 6.10.0-test5 to 6.10.0-test6
| { | ||
| "name": "react-tag-input", | ||
| "version": "6.10.0-test5", | ||
| "version": "6.10.0-test6", | ||
| "type": "module", | ||
@@ -36,7 +36,7 @@ "description": "React tags is a fantastically simple tagging component for your React projects", | ||
| "test:watch": "jest --watch --notify --coverage", | ||
| "start": "webpack serve --config webpack-dev-server.config.js --progress ", | ||
| "start": "webpack serve --config webpack-dev-server.config.cjs --progress ", | ||
| "format": "prettier --write src/**/*.js __tests__/**/*.js", | ||
| "build": "rm -rf dist-modules && webpack --config webpack-production.config.js --progress --color && babel src --out-dir dist-modules --copy-files", | ||
| "build:esm": "rm -rf dist && node buildLib.cjs && yarn gen:types", | ||
| "build:example": "webpack --config webpack-dev-server.config.js", | ||
| "build:example": "node buildExample.mjs", | ||
| "precommit": "./set_up_hooks.sh", | ||
@@ -89,2 +89,3 @@ "semantic-release": "semantic-release", | ||
| "esbuild": "^0.21.2", | ||
| "esbuild-sass-plugin": "^3.3.0", | ||
| "eslint": "7.3.1", | ||
@@ -91,0 +92,0 @@ "eslint-plugin-jest": "24.3.6", |
173
README.md
@@ -6,4 +6,6 @@ # React tags | ||
| [](https://www.npmjs.com/package/react-tag-input) | ||
| [](https://travis-ci.com/react-tags/react-tags)[](https://github.com/prettier/prettier) | ||
| [](https://github.com/prettier/prettier) | ||
| [](https://github.com/sponsors/ad1992) | ||
| React-tags is a simple tagging component ready to drop in your projects. The component is inspired by GMail's *To* field in the compose window. | ||
@@ -176,3 +178,3 @@ | ||
| |[`suggestions`](#suggestions) | `Array` | `[]` | An array of suggestions that are used as basis for showing suggestions. | ||
| |[`delimiters`](#delimiters) | `Array` | `[13, 9]` | Specifies which characters keycode should terminate tags input. | ||
| |[`delimiters`](#delimiters) | `Array` | `[13, 9]` | Specifies which characters keycode should terminate tags input. `[Deprecated]`, use [`separators`](#separators) instead. | ||
| |[`separators`](#separators) | `Array` | `["Enter", "Tab"]` | Specifies which characters should terminate tags input | | ||
@@ -186,3 +188,3 @@ |[`placeholder`](#placeholder) | `String` | `Add new tag` | The placeholder shown for the input. | ||
| |[`handleTagClick`](#handleTagClick) | `Function` | `undefined` | Function called when the user wants to know which tag was clicked. | ||
| |[`autofocus`](#autofocus) | `Boolean` | `true` | Boolean value to control whether the text-input should be autofocused on mount. | ||
| |[`autofocus`](#autofocus) | `Boolean` | `true` | Boolean value to control whether the text-input should be autofocused on mount. `[Deprecated]`, use [`autoFocus`](#autoFocus) instead. | ||
| |[`autoFocus`](#autoFocus) | `Boolean` | `true` | Boolean value to control whether the text-input should be autofocused on mount. | ||
@@ -195,3 +197,3 @@ |[`allowDeleteFromEmptyInput`](#allowDeleteFromEmptyInput) | `Boolean` | `true` | Boolean value to control whether tags should be deleted when the 'Delete' key is pressed in an empty Input Box. | ||
| |[`removeComponent`](#removeComponent) | `Function` | | Function to render custom remove component for the tags. | ||
| |[`autocomplete`](#autocomplete) | `Boolean`/`Number` | `false` | Ensure the first matching suggestion is automatically converted to a tag when a [separator](#separator) key is pressed. | ||
| |[`autocomplete`](#autocomplete) | `Boolean`/`Number` | `false` | Ensure the first matching suggestion is automatically converted to a tag when a [separator](#separator) key is pressed.`[Deprecated]` and will be removed in v7.x.x, more info in [#949](https://github.com/react-tags/react-tags/issues/949) | ||
| |[`readOnly`](#readOnly) | `Boolean` | `false` | Read-only mode without the input box and `removeComponent` and drag-n-drop features disabled. | ||
@@ -201,3 +203,3 @@ |[`name`](#name) | `String` | `undefined` | The `name` attribute added to the input. | ||
| |[`maxLength`](#maxLength) | `Number` | `Infinity` | The `maxLength` attribute added to the input. | ||
| |[`inline`](#inline) | `Boolean` | `true` | Render input field and selected tags in-line. | ||
| |[`inline`](#inline) | `Boolean` | `true` | Render input field and selected tags in-line. `[Deprecated]`, use [`inputFieldPosition`](#inputFieldPosition) instead. | ||
| |[`inputFieldPosition`](#inputFieldPosition) | `String` | `inline` | Specify position of input field relative to tags | ||
@@ -215,2 +217,86 @@ |[`allowUnique`](#allowUnique) | `Boolean` | `true` | Boolean value to control whether tags should be unqiue. | ||
| ## Styling | ||
| `<ReactTags>` does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. By default, the component provides the following classes with which you can style - | ||
| - `ReactTags__tags` | ||
| - `ReactTags__tagInput` | ||
| - `ReactTags__tagInputField` | ||
| - `ReactTags__selected` | ||
| - `ReactTags__selected ReactTags__tag` | ||
| - `ReactTags__selected ReactTags__remove` | ||
| - `ReactTags__suggestions` | ||
| - `ReactTags__activeSuggestion` | ||
| - `ReactTags__editTagInput` | ||
| - `ReactTags__editTagInputField` | ||
| - `ReactTags__clearAll` | ||
| An example can be found in [`/example/reactTags.css`](https://github.com/react-tags/react-tags/blob/master/example/reactTags.css). | ||
| If you need to set your own class names on the component, you may pass in | ||
| a `classNames` prop. | ||
| ```js | ||
| <ReactTags | ||
| classNames={{ | ||
| tags: 'tagsClass', | ||
| tagInput: 'tagInputClass', | ||
| tagInputField: 'tagInputFieldClass', | ||
| selected: 'selectedClass', | ||
| tag: 'tagClass', | ||
| remove: 'removeClass', | ||
| suggestions: 'suggestionsClass', | ||
| activeSuggestion: 'activeSuggestionClass', | ||
| editTagInput: 'editTagInputClass', | ||
| editTagInputField: 'editTagInputField', | ||
| clearAll: 'clearAllClass', | ||
| }} | ||
| ...> | ||
| ``` | ||
| ## Preparing for Migration to v7.x.x | ||
| Below are the list of `deprecated` props so please stop using it and migrate to the new props as these will be removed in `v7.x.x`. | ||
| You will see a warning for the migration as well in the console. | ||
| - `delimiters` - Please use [`separators`](#separators) instead, more info in [this issue](https://github.com/react-tags/react-tags/issues/960). | ||
| - `inline` - Please use [`inputFieldPosition`](#inputFieldPosition) instead. | ||
| - `autofocus` - Please use [`autoFocus`](#autoFocus) instead. | ||
| Additionally the prop `autocomplete` is deprecated and will be removed in `v7.x.x`. If you have any concerns regarding this, please share your thoughts in [this issue](https://github.com/react-tags/react-tags/issues/949). | ||
| ## Support | ||
| If you like this library, please support it to contribute to its development :) | ||
| [](https://github.com/sponsors/ad1992) | ||
| ## Dev | ||
| The component is written in ES6 and uses [Webpack](http://webpack.github.io/) as its build tool. | ||
| ## Set up instructions | ||
| ``` | ||
| git clone git@github.com:react-tags/react-tags.git | ||
| cd react-tags | ||
| npm install | ||
| npm run precommit | ||
| npm run start | ||
| ``` | ||
| open [http://localhost:8090/example](http://localhost:8090/example) | ||
| ## Contributing | ||
| Got ideas on how to make this better? Open an issue! | ||
| ## Thanks | ||
| The autocomplete dropdown is inspired by Lea Verou's [awesomeplete](https://github.com/LeaVerou/awesomplete) library. The Drag and drop functionality is provided by Dan Abramov's insanely useful [ReactDND](https://github.com/gaearon/react-dnd) library. | ||
| Also thanks to the awesome contributors who've made the library far better! | ||
| [default-suggestions-filter-logic]: https://github.com/react-tags/react-tags/blob/v4.0.1/lib/ReactTags.js#L83 | ||
| [includes-polyfill]: https://github.com/mathiasbynens/String.prototype.includes | ||
| ### tags | ||
@@ -608,3 +694,3 @@ An array of tags that are displayed as pre-selected. Each tag should have an `id` property, property for the label, which is specified by the [`labelField`](#labelFieldOption) and class for label, which is specified by `className`. | ||
| #### clearAll | ||
| ### clearAll | ||
@@ -614,78 +700,7 @@ This props implies whether 'clear all' button should be shown. Defaults to `false`. | ||
| #### onClearAll | ||
| ### onClearAll | ||
| This callback is if present is triggered when "clear all" button is clicked. You can set the [`tags`](#tags) prop to empty in this callback. | ||
| #### maxTags | ||
| ### maxTags | ||
| This prop specifies the maximum count of tags to be added. Incase the tags exceed, error will show up to convey the maximum tag limit has reached. | ||
| ## Styling | ||
| `<ReactTags>` does not come up with any styles. However, it is very easy to customize the look of the component the way you want it. By default, the component provides the following classes with which you can style - | ||
| - `ReactTags__tags` | ||
| - `ReactTags__tagInput` | ||
| - `ReactTags__tagInputField` | ||
| - `ReactTags__selected` | ||
| - `ReactTags__selected ReactTags__tag` | ||
| - `ReactTags__selected ReactTags__remove` | ||
| - `ReactTags__suggestions` | ||
| - `ReactTags__activeSuggestion` | ||
| - `ReactTags__editTagInput` | ||
| - `ReactTags__editTagInputField` | ||
| - `ReactTags__clearAll` | ||
| An example can be found in [`/example/reactTags.css`](https://github.com/react-tags/react-tags/blob/master/example/reactTags.css). | ||
| If you need to set your own class names on the component, you may pass in | ||
| a `classNames` prop. | ||
| ```js | ||
| <ReactTags | ||
| classNames={{ | ||
| tags: 'tagsClass', | ||
| tagInput: 'tagInputClass', | ||
| tagInputField: 'tagInputFieldClass', | ||
| selected: 'selectedClass', | ||
| tag: 'tagClass', | ||
| remove: 'removeClass', | ||
| suggestions: 'suggestionsClass', | ||
| activeSuggestion: 'activeSuggestionClass', | ||
| editTagInput: 'editTagInputClass', | ||
| editTagInputField: 'editTagInputField', | ||
| clearAll: 'clearAllClass', | ||
| }} | ||
| ...> | ||
| ``` | ||
| ## Support | ||
| If you like this library, you can support to help it improve:) | ||
| [](https://github.com/sponsors/ad1992) | ||
| ## Dev | ||
| The component is written in ES6 and uses [Webpack](http://webpack.github.io/) as its build tool. | ||
| ## Set up instructions | ||
| ``` | ||
| git clone git@github.com:react-tags/react-tags.git | ||
| cd react-tags | ||
| npm install | ||
| npm run precommit | ||
| npm run start | ||
| ``` | ||
| open [http://localhost:8090/example](http://localhost:8090/example) | ||
| ## Contributing | ||
| Got ideas on how to make this better? Open an issue! | ||
| ## Thanks | ||
| The autocomplete dropdown is inspired by Lea Verou's [awesomeplete](https://github.com/LeaVerou/awesomplete) library. The Drag and drop functionality is provided by Dan Abramov's insanely useful [ReactDND](https://github.com/gaearon/react-dnd) library. | ||
| Also thanks to the awesome contributors who've made the library far better! | ||
| [default-suggestions-filter-logic]: https://github.com/react-tags/react-tags/blob/v4.0.1/lib/ReactTags.js#L83 | ||
| [includes-polyfill]: https://github.com/mathiasbynens/String.prototype.includes |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.36%
308373
- Number of lines in readme file
- increased by2.19%
699
Worsened metrics
- Dev dependency count
- increased by2.22%
46
No dependency changes