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

hc-oss · Oct 1, 2022 · a1e4ff3 · a1e4ff3
1 parent 29eec27
commit a1e4ff3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/package.json b/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",

diff --git a/src/index.tsx b/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();
 

diff --git a/stories/tags-input.stories.tsx b/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>
   );
 };