react-input-chips 0.3.1 → 0.3.2

package/dist/index.css

@@ -1,5 +1,5 @@
 /* src/components/styles.css */
-.chip-input-warpper {
+.chip-input-wrapper {
   gap: 4px;
   flex: 2;
   padding: 5px;
@@ -7,11 +7,12 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  transform: scale(1);
   border: 1px solid #BBBBBB;
   border-radius: 4px;
+  max-width: 650px;
+  min-width: 300px;
   .chip {
-    background: #f8e3e3;
+    background: #e5e5e5;
     border-radius: 4px;
     color: #333333;
     display: flex;
@@ -40,4 +41,12 @@
     place-items: center;
   }
 }
+.chip-input-wrapper-error {
+  border: 2px solid red;
+}
+.error-msg-wrapper {
+  margin: 0;
+  font-size: 12px;
+  color: red;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/styles.css"],"sourcesContent":[".chip-input-warpper {\n   gap: 4px;\n   flex: 2;\n   padding: 5px;\n   overflow: auto;\n   display: flex;\n   flex-wrap: wrap;\n   align-items: center;\n   transform: scale(1);\n   border: 1px solid #BBBBBB;\n   border-radius: 4px;\n\n   .chip {\n      background: #f8e3e3;\n      border-radius: 4px;\n      color: #333333;\n      display: flex;\n      gap: 0.5rem;\n      align-items: center;\n      justify-content: space-between;\n      max-width: max-content;\n      padding: 6px;\n   }\n\n   .chip-input {\n      border: none;\n      outline: none;\n      flex: 1;\n      padding: 0 8px;\n      height: 30px;\n   }\n\n   .closeBtn {\n      outline: none;\n      border: none;\n      background: none;\n      height: 18px;\n      width: 18px;\n      object-fit: cover;\n      cursor: pointer;\n      display: grid;\n      place-items: center;\n   }\n}"],"mappings":";AAAA,CAAC;AACE,OAAK;AACL,QAAM;AACN,WAAS;AACT,YAAU;AACV,WAAS;AACT,aAAW;AACX,eAAa;AACb,aAAW,MAAM;AACjB,UAAQ,IAAI,MAAM;AAClB,iBAAe;AAEf,GAAC;AACE,gBAAY;AACZ,mBAAe;AACf,WAAO;AACP,aAAS;AACT,SAAK;AACL,iBAAa;AACb,qBAAiB;AACjB,eAAW;AACX,aAAS;AACZ;AAEA,GAAC;AACE,YAAQ;AACR,aAAS;AACT,UAAM;AACN,aAAS,EAAE;AACX,YAAQ;AACX;AAEA,GAAC;AACE,aAAS;AACT,YAAQ;AACR,gBAAY;AACZ,YAAQ;AACR,WAAO;AACP,gBAAY;AACZ,YAAQ;AACR,aAAS;AACT,iBAAa;AAChB;AACH;","names":[]}
+{"version":3,"sources":["../src/components/styles.css"],"sourcesContent":[".chip-input-wrapper {\n   gap: 4px;\n   flex: 2;\n   padding: 5px;\n   overflow: auto;\n   display: flex;\n   flex-wrap: wrap;\n   align-items: center;\n   border: 1px solid #BBBBBB;\n   border-radius: 4px;\n   max-width: 650px;\n   min-width: 300px;\n\n   .chip {\n      background: #e5e5e5;\n      border-radius: 4px;\n      color: #333333;\n      display: flex;\n      gap: 0.5rem;\n      align-items: center;\n      justify-content: space-between;\n      max-width: max-content;\n      padding: 6px;\n   }\n\n   .chip-input {\n      border: none;\n      outline: none;\n      flex: 1;\n      padding: 0 8px;\n      height: 30px;\n   }\n\n   .closeBtn {\n      outline: none;\n      border: none;\n      background: none;\n      height: 18px;\n      width: 18px;\n      object-fit: cover;\n      cursor: pointer;\n      display: grid;\n      place-items: center;\n   }\n}\n\n.chip-input-wrapper-error {\n   border: 2px solid red\n}\n\n.error-msg-wrapper {\n   margin: 0;\n   font-size: 12px;\n   color: red\n}"],"mappings":";AAAA,CAAC;AACE,OAAK;AACL,QAAM;AACN,WAAS;AACT,YAAU;AACV,WAAS;AACT,aAAW;AACX,eAAa;AACb,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,aAAW;AACX,aAAW;AAEX,GAAC;AACE,gBAAY;AACZ,mBAAe;AACf,WAAO;AACP,aAAS;AACT,SAAK;AACL,iBAAa;AACb,qBAAiB;AACjB,eAAW;AACX,aAAS;AACZ;AAEA,GAAC;AACE,YAAQ;AACR,aAAS;AACT,UAAM;AACN,aAAS,EAAE;AACX,YAAQ;AACX;AAEA,GAAC;AACE,aAAS;AACT,YAAQ;AACR,gBAAY;AACZ,YAAQ;AACR,WAAO;AACP,gBAAY;AACZ,YAAQ;AACR,aAAS;AACT,iBAAa;AAChB;AACH;AAEA,CAAC;AACE,UAAQ,IAAI,MAAM;AACrB;AAEA,CAAC;AACE,UAAQ;AACR,aAAW;AACX,SAAO;AACV;","names":[]}

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type AllowedKeys = 'ShiftRight' | 'ShiftLeft' | 'ControlLeft' | 'ControlRight' | 'AltRight' | 'AltLeft' | 'MetaLeft' | 'MetaRight' | 'Tab' | 'Enter' | 'Backspace' | 'Space' | 'Comma' | 'Period' | 'Slash' | 'Semicolon' | 'ArrowLeft' | 'ArrowRight';
 interface TInputChips {
     chips: string[];
     inputValue: string;
-    setChips: (val: string[]) => void;
+    setChips: React.Dispatch<React.SetStateAction<string[]>>;
     setInputValue: React.Dispatch<React.SetStateAction<string>>;
-    keysToTriggerChipConversion?: string[];
-    needWhiteSpace?: boolean;
+    keysToTriggerChipConversion?: AllowedKeys[];
     validate?: () => boolean;
     disabled?: boolean;
     placeholder?: string;
@@ -14,8 +14,10 @@ interface TInputChips {
     removeBtnSvg?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
     chipStyles?: React.CSSProperties;
     containerStyles?: React.CSSProperties;
+    backspaceToRemoveChip?: boolean;
+    errorMsg?: string;
 }
 
-declare const InputChips: ({ chips, setChips, inputValue, setInputValue, keysToTriggerChipConversion, needWhiteSpace, validate, disabled, placeholder, nextPlaceholder, removeBtnSvg, chipStyles, containerStyles, }: TInputChips) => react_jsx_runtime.JSX.Element;
+declare const InputChips: ({ chips, setChips, inputValue, setInputValue, keysToTriggerChipConversion, validate, disabled, placeholder, nextPlaceholder, removeBtnSvg, chipStyles, containerStyles, backspaceToRemoveChip, errorMsg, }: TInputChips) => react_jsx_runtime.JSX.Element;
 
 export { InputChips };

package/dist/index.js

@@ -1,34 +1,53 @@
 // src/components/InputChip.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var InputChips = ({
   chips,
   setChips,
   inputValue,
   setInputValue,
-  keysToTriggerChipConversion = ["Enter", ","],
-  needWhiteSpace = true,
+  keysToTriggerChipConversion = ["Enter", "Comma"],
   validate,
   disabled = false,
   placeholder,
   nextPlaceholder,
   removeBtnSvg,
   chipStyles,
-  containerStyles
+  containerStyles,
+  backspaceToRemoveChip = false,
+  errorMsg
 }) => {
   const handleInputChange = (e) => {
-    if (needWhiteSpace) {
-      setInputValue(e.target.value);
+    const value = e.target.value;
+    if (keysToTriggerChipConversion.includes("Space")) {
+      setInputValue(value.trim());
     } else {
-      setInputValue(e.target.value.trim());
+      setInputValue(value);
     }
   };
   const handleInputKeyDown = (e) => {
-    if (keysToTriggerChipConversion.includes(e.key) && (!validate || validate())) {
-      const regex = new RegExp(
-        `[${keysToTriggerChipConversion.join("")}]`,
-        "g"
+    if (backspaceToRemoveChip && e.key === "Backspace" && inputValue.trim() === "") {
+      setChips((prevState) => {
+        const updatedChips = [...prevState];
+        updatedChips.pop();
+        return updatedChips;
+      });
+    }
+    const isKeyAllowed = (key) => {
+      return keysToTriggerChipConversion.includes(
+        key
       );
-      const chip = inputValue.trim().replace(regex, "");
+    };
+    if (isKeyAllowed(e.code) && (!validate || validate())) {
+      let chip = inputValue.trim();
+      if (keysToTriggerChipConversion.some((key) => key.length === 1)) {
+        const regex = new RegExp(
+          `[${keysToTriggerChipConversion.filter((key) => key.length === 1).map(
+            (key) => key.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")
+          ).join("")}]`,
+          "g"
+        );
+        chip = chip.replace(regex, "");
+      }
       if (chip) {
         setChips([...chips, chip]);
         setInputValue("");
@@ -43,54 +62,64 @@ var InputChips = ({
     );
     setChips(filteredChips);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "chip-input-warpper", style: containerStyles ?? {}, children: [
-    chips?.map((chip, index) => /* @__PURE__ */ jsxs(
-      "div",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "section",
       {
-        "data-testid": `input-value-chip-${index}`,
-        className: "chip",
-        style: chipStyles ?? {},
+        className: errorMsg?.length ? "chip-input-wrapper chip-input-wrapper-error" : "chip-input-wrapper",
+        style: containerStyles ?? {},
         children: [
-          chip,
+          chips.map((chip, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-testid": `input-value-chip-${index}`,
+              className: "chip",
+              style: chipStyles ?? {},
+              children: [
+                chip,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "closeBtn",
+                    "data-testid": `remove-chip-btn-${index}`,
+                    onClick: (e) => removeChip(e, chip + index),
+                    children: removeBtnSvg || /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        stroke: "currentColor",
+                        fill: "currentColor",
+                        strokeWidth: "0",
+                        viewBox: "0 0 24 24",
+                        height: 15,
+                        children: [
+                          /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0z" }),
+                          /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            chip + index
+          )),
           /* @__PURE__ */ jsx(
-            "button",
+            "input",
             {
-              type: "button",
-              className: "closeBtn",
-              "data-testid": `remove-chip-btn-${index}`,
-              onClick: (e) => removeChip(e, chip + index),
-              children: removeBtnSvg || /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  stroke: "currentColor",
-                  fill: "currentColor",
-                  strokeWidth: "0",
-                  viewBox: "0 0 24 24",
-                  height: 15,
-                  children: [
-                    /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0z" }),
-                    /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
-                  ]
-                }
-              )
+              className: "chip-input",
+              type: "text",
+              placeholder: disabled ? "" : chips.length ? nextPlaceholder : placeholder,
+              value: inputValue,
+              onChange: handleInputChange,
+              onKeyDown: handleInputKeyDown,
+              disabled
             }
           )
         ]
-      },
-      chip + index
-    )),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        className: "chip-input",
-        type: "text",
-        placeholder: disabled ? "" : chips.length ? nextPlaceholder : placeholder,
-        value: inputValue,
-        onChange: handleInputChange,
-        onKeyDown: handleInputKeyDown,
-        disabled
       }
-    )
+    ),
+    errorMsg?.length && /* @__PURE__ */ jsx("p", { className: "error-msg-wrapper", children: errorMsg })
   ] });
 };
 var InputChip_default = InputChips;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InputChip.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport {TInputChips} from '../types';\n\nconst InputChips = ({\n    chips,\n    setChips,\n    inputValue,\n    setInputValue,\n    keysToTriggerChipConversion = ['Enter', ','],\n    needWhiteSpace = true,\n    validate,\n    disabled = false,\n    placeholder,\n    nextPlaceholder,\n    removeBtnSvg,\n    chipStyles,\n    containerStyles,\n}: TInputChips) => {\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (needWhiteSpace) {\n            setInputValue(e.target.value);\n        } else {\n            setInputValue(e.target.value.trim());\n        }\n    };\n\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (\n            keysToTriggerChipConversion.includes(e.key) &&\n            (!validate || validate())\n        ) {\n            const regex = new RegExp(\n                `[${keysToTriggerChipConversion.join('')}]`,\n                'g'\n            );\n            const chip = inputValue.trim().replace(regex, '');\n\n            if (chip) {\n                setChips([...chips, chip]);\n                setInputValue('');\n            }\n\n            e.preventDefault();\n        }\n    };\n\n    const removeChip = (\n        e: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n        chipToRemove: string\n    ) => {\n        e.preventDefault();\n        const filteredChips = chips.filter(\n            (chip, index) => chip + index !== chipToRemove\n        );\n        setChips(filteredChips);\n    };\n\n    return (\n        <div className=\"chip-input-warpper\" style={containerStyles ?? {}}>\n            {chips?.map((chip, index) => (\n                <div\n                    key={chip + index}\n                    data-testid={`input-value-chip-${index}`}\n                    className=\"chip\"\n                    style={chipStyles ?? {}}\n                >\n                    {chip}\n                    <button\n                        type=\"button\"\n                        className=\"closeBtn\"\n                        data-testid={`remove-chip-btn-${index}`}\n                        onClick={(e) => removeChip(e, chip + index)}\n                    >\n                        {removeBtnSvg || (\n                            <svg\n                                stroke=\"currentColor\"\n                                fill=\"currentColor\"\n                                strokeWidth=\"0\"\n                                viewBox=\"0 0 24 24\"\n                                height={15}\n                            >\n                                <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n                                <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n                            </svg>\n                        )}\n                    </button>\n                </div>\n            ))}\n            <input\n                className=\"chip-input\"\n                type=\"text\"\n                placeholder={\n                    disabled ? '' : chips.length ? nextPlaceholder : placeholder\n                }\n                value={inputValue}\n                onChange={handleInputChange}\n                onKeyDown={handleInputKeyDown}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n\nexport default InputChips;\n"],"mappings":";AA2E4B,SAOI,KAPJ;AAvE5B,IAAM,aAAa,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,8BAA8B,CAAC,SAAS,GAAG;AAAA,EAC3C,iBAAiB;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAmB;AACf,QAAM,oBAAoB,CAAC,MAA2C;AAClE,QAAI,gBAAgB;AAChB,oBAAc,EAAE,OAAO,KAAK;AAAA,IAChC,OAAO;AACH,oBAAc,EAAE,OAAO,MAAM,KAAK,CAAC;AAAA,IACvC;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,MAA6C;AACrE,QACI,4BAA4B,SAAS,EAAE,GAAG,MACzC,CAAC,YAAY,SAAS,IACzB;AACE,YAAM,QAAQ,IAAI;AAAA,QACd,IAAI,4BAA4B,KAAK,EAAE,CAAC;AAAA,QACxC;AAAA,MACJ;AACA,YAAM,OAAO,WAAW,KAAK,EAAE,QAAQ,OAAO,EAAE;AAEhD,UAAI,MAAM;AACN,iBAAS,CAAC,GAAG,OAAO,IAAI,CAAC;AACzB,sBAAc,EAAE;AAAA,MACpB;AAEA,QAAE,eAAe;AAAA,IACrB;AAAA,EACJ;AAEA,QAAM,aAAa,CACf,GACA,iBACC;AACD,MAAE,eAAe;AACjB,UAAM,gBAAgB,MAAM;AAAA,MACxB,CAAC,MAAM,UAAU,OAAO,UAAU;AAAA,IACtC;AACA,aAAS,aAAa;AAAA,EAC1B;AAEA,SACI,qBAAC,SAAI,WAAU,sBAAqB,OAAO,mBAAmB,CAAC,GAC1D;AAAA,WAAO,IAAI,CAAC,MAAM,UACf;AAAA,MAAC;AAAA;AAAA,QAEG,eAAa,oBAAoB,KAAK;AAAA,QACtC,WAAU;AAAA,QACV,OAAO,cAAc,CAAC;AAAA,QAErB;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAU;AAAA,cACV,eAAa,mBAAmB,KAAK;AAAA,cACrC,SAAS,CAAC,MAAM,WAAW,GAAG,OAAO,KAAK;AAAA,cAEzC,0BACG;AAAA,gBAAC;AAAA;AAAA,kBACG,QAAO;AAAA,kBACP,MAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,QAAQ;AAAA,kBAER;AAAA,wCAAC,UAAK,MAAK,QAAO,GAAE,iBAAgB;AAAA,oBACpC,oBAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA;AAAA,cACpH;AAAA;AAAA,UAER;AAAA;AAAA;AAAA,MAxBK,OAAO;AAAA,IAyBhB,CACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAU;AAAA,QACV,MAAK;AAAA,QACL,aACI,WAAW,KAAK,MAAM,SAAS,kBAAkB;AAAA,QAErD,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,KACJ;AAER;AAEA,IAAO,oBAAQ;","names":[]}
+{"version":3,"sources":["../src/components/InputChip.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport {TInputChips, AllowedKeys} from '../types';\n\nconst InputChips = ({\n    chips,\n    setChips,\n    inputValue,\n    setInputValue,\n    keysToTriggerChipConversion = ['Enter', 'Comma'],\n    validate,\n    disabled = false,\n    placeholder,\n    nextPlaceholder,\n    removeBtnSvg,\n    chipStyles,\n    containerStyles,\n    backspaceToRemoveChip = false,\n    errorMsg,\n}: TInputChips) => {\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n\n        if (keysToTriggerChipConversion.includes('Space')) {\n            setInputValue(value.trim());\n        } else {\n            setInputValue(value);\n        }\n    };\n\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (\n            backspaceToRemoveChip &&\n            e.key === 'Backspace' &&\n            inputValue.trim() === ''\n        ) {\n            setChips((prevState) => {\n                const updatedChips = [...prevState];\n                updatedChips.pop();\n                return updatedChips;\n            });\n        }\n\n        const isKeyAllowed = (key: string): key is AllowedKeys => {\n            return (keysToTriggerChipConversion as AllowedKeys[]).includes(\n                key as AllowedKeys\n            );\n        };\n\n        if (isKeyAllowed(e.code) && (!validate || validate())) {\n            let chip = inputValue.trim();\n\n            if (keysToTriggerChipConversion.some((key) => key.length === 1)) {\n                const regex = new RegExp(\n                    `[${keysToTriggerChipConversion\n                        .filter((key) => key.length === 1)\n                        .map((key) =>\n                            key.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&')\n                        )\n                        .join('')}]`,\n                    'g'\n                );\n                chip = chip.replace(regex, '');\n            }\n\n            if (chip) {\n                setChips([...chips, chip]);\n                setInputValue('');\n            }\n\n            e.preventDefault();\n        }\n    };\n\n    const removeChip = (\n        e: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n        chipToRemove: string\n    ) => {\n        e.preventDefault();\n        const filteredChips = chips.filter(\n            (chip, index) => chip + index !== chipToRemove\n        );\n        setChips(filteredChips);\n    };\n\n    return (\n        <>\n            <section\n                className={\n                    errorMsg?.length\n                        ? 'chip-input-wrapper chip-input-wrapper-error'\n                        : 'chip-input-wrapper'\n                }\n                style={containerStyles ?? {}}\n            >\n                {chips.map((chip, index) => (\n                    <div\n                        key={chip + index}\n                        data-testid={`input-value-chip-${index}`}\n                        className=\"chip\"\n                        style={chipStyles ?? {}}\n                    >\n                        {chip}\n                        <button\n                            type=\"button\"\n                            className=\"closeBtn\"\n                            data-testid={`remove-chip-btn-${index}`}\n                            onClick={(e) => removeChip(e, chip + index)}\n                        >\n                            {removeBtnSvg || (\n                                <svg\n                                    stroke=\"currentColor\"\n                                    fill=\"currentColor\"\n                                    strokeWidth=\"0\"\n                                    viewBox=\"0 0 24 24\"\n                                    height={15}\n                                >\n                                    <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n                                    <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n                                </svg>\n                            )}\n                        </button>\n                    </div>\n                ))}\n                <input\n                    className=\"chip-input\"\n                    type=\"text\"\n                    placeholder={\n                        disabled\n                            ? ''\n                            : chips.length\n                            ? nextPlaceholder\n                            : placeholder\n                    }\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onKeyDown={handleInputKeyDown}\n                    disabled={disabled}\n                />\n            </section>\n            {errorMsg?.length && (\n                <p className=\"error-msg-wrapper\">{errorMsg}</p>\n            )}\n        </>\n    );\n};\n\nexport default InputChips;\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-input-chips",
     "private": false,
-    "version": "0.3.1",
+    "version": "0.3.2",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",

package/src/App.tsx

@@ -11,6 +11,9 @@ const App = () => {
         if (!inputValue.trim().length) {
             tempErr.inputValueError = 'atleast add one message';
         }
+        if (chips.length > 10) {
+            tempErr.inputValueError = 'max 10 chips';
+        }
 
         setError(tempErr);
         return Object.keys(tempErr).length <= 0;