Merge pull request #1 from christo-pr/bug/rerender-after-html-prop-ch…

…ange

handle re-render on prop change, and avoid duplicate content

example/src/App.js

@@ -1,19 +1,26 @@
-import React from 'react'
+import React, { useState } from 'react'
 import InnerHTML from 'dangerously-set-html-content'
 
 export default function App() {
 
-  const html = `
+  const [content, setContent] = useState(`
     <div>This wil be rendered</div>
     <script>
       alert('testing')
     </script>
-
+  `
+  )
+  const updatedHtml = `
+    <div>Look at the console now!</div>
+    <script>
+      console.log('hacked!')
+    </script>
   `
 
   return (
     <div>
-      <InnerHTML html={html} />
+      <InnerHTML html={content} />
+      <button onClick={() => setContent(updatedHtml)}>Hit here to see magic!</button>
     </div>
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dangerously-set-html-content",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Render raw html at your own risk!",
   "author": "christo-pr",
   "license": "MIT",

src/index.js

@@ -6,8 +6,9 @@ function DangerouslySetHtmlContent(props) {
 
   useEffect(() => {
     const slotHtml = document.createRange().createContextualFragment(html) // Create a 'tiny' document and parse the html string
-    divRef.current.appendChild(slotHtml) // Append it so it can be executed
-  }, [])
+    divRef.current.innerHTML = '' // Clear the container
+    divRef.current.appendChild(slotHtml) // Append the new content
+  }, [html])
 
 
   return (