♻️ UX improvements

Author: harshzalavadiya

README.md

@@ -13,6 +13,7 @@ also see [multi select component](https://github.com/harshzalavadiya/react-multi
 - 🍃 Lightweight (2KB including styles 😎)
 - 💅 Themeable
 - ✌ Written w/ TypeScript
+- 🗑️ Use Backspace to remove last tag
 
 ## 🔧 Installation
 
@@ -39,7 +40,6 @@ const Example = () => {
       <TagsInput
         value={selected}
         onChange={setSelected}
-        seprators={["Enter", ","]}
         name="fruits"
         placeHolder="enter fruits"
       />
@@ -53,16 +53,16 @@ export default Example;
 
 ## 👀 Props
 
-| Prop          | Description                                  | Type                    | Default     |
-| ------------- | -------------------------------------------- | ----------------------- | ----------- |
-| `name`        | value for name of input                      | `string`                |             |
-| `placeholder` | placeholder for text input                   | `string`                |             |
-| `value`       | initial tags                                 | `string[]`              | `[]`        |
-| `onChange`    | onChange callback (added/removed)            | `string[]`              |             |
-| `onBlur`      | input `onBlur` callback                      | `event`                 |             |
-| `seprators`   | when to add tag (i.e. `Space`, `,`, `Enter`) | `string[]`              | `["Enter"]` |
-| `onExisting`  | if tag is already added then callback        | `(tag: string) => void` |             |
-| `onRemoved`   | on tag removed callback                      | `(tag: string) => void` |             |
+| Prop          | Description                            | Type                    | Default     |
+| ------------- | -------------------------------------- | ----------------------- | ----------- |
+| `name`        | value for name of input                | `string`                |             |
+| `placeholder` | placeholder for text input             | `string`                |             |
+| `value`       | initial tags                           | `string[]`              | `[]`        |
+| `onChange`    | onChange callback (added/removed)      | `string[]`              |             |
+| `onBlur`      | input `onBlur` callback                | `event`                 |             |
+| `seprators`   | when to add tag (i.e. `Space`,`Enter`) | `string[]`              | `["Enter"]` |
+| `onExisting`  | if tag is already added then callback  | `(tag: string) => void` |             |
+| `onRemoved`   | on tag removed callback                | `(tag: string) => void` |             |
 
 ## 💅 Themeing
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-tag-input-component",
   "description": "lightweight component for tag(s) input",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "author": "Harsh Zalavadiya",
   "module": "dist/react-tag-input-component.esm.js",

preview.gif

@@ -83,7 +83,7 @@ export const TagsInput = ({
       setTags(tags.slice(0, -1));
     }
 
-    if (e.key && (seprators || defaultSeprators).includes(e.key)) {
+    if (text && (seprators || defaultSeprators).includes(e.key)) {
       if (tags.includes(text)) {
         onExisting && onExisting(text);
         return;

src/index.tsx

@@ -16,7 +16,6 @@ export const Default = () => {
       <TagsInput
         value={selected}
         onChange={setSelected}
-        seprators={["Enter", ","]}
         name="fruits"
         placeHolder="enter fruits"
       />