refactor: ♻️ detact outside value changes (#27)

Author: harshzalavadiya

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-tag-input-component",
   "description": "lightweight component for tag(s) input",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "license": "MIT",
   "author": "Harsh Zalavadiya",
   "repository": "https://github.com/hc-oss/react-tag-input-component",

src/index.tsx

@@ -88,6 +88,12 @@ export const TagsInput = ({
     onChange && onChange(tags);
   }, [tags]);
 
+  useEffect(() => {
+    if (JSON.stringify(value) !== JSON.stringify(tags)) {
+      setTags(value)
+    }
+  }, [value])
+
   const handleOnKeyUp = e => {
     e.stopPropagation();
 

stories/tags-input.stories.tsx

@@ -32,7 +32,7 @@ export const Page = () => {
         isEditOnRemove={isEditOnRemove}
         beforeAddValidate={beforeAddValidate}
       />
-      <div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
+      <div style={{ marginTop: "2rem" }}>
         <button
           onClick={() => setDisabled(!disabled)}
           style={{ marginRight: "2rem" }}
@@ -41,7 +41,7 @@ export const Page = () => {
         </button>
         <pre>Disable: {JSON.stringify(disabled)}</pre>
       </div>
-      <div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
+      <div>
         <button
           onClick={() => setisEditOnRemove(!isEditOnRemove)}
           style={{ marginRight: "2rem" }}
@@ -50,6 +50,11 @@ export const Page = () => {
         </button>
         <pre>Keep Words on Backspace: {JSON.stringify(isEditOnRemove)}</pre>
       </div>
+      <div>
+        <button onClick={() => setSelected(["tangerine"])}>
+          override value
+        </button>
+      </div>
     </div>
   );
 };