execute the bottle data tag

packages/react-components/src/components/dangerous-element.tsx

@@ -0,0 +1,24 @@
+import React, { useRef, useLayoutEffect } from 'react'
+/**
+ * Execute a script tag in a React component.
+ * https://macarthur.me/posts/script-tags-in-react/
+ */
+function DangrousElement({ markup }: { markup: string }) {
+    const elRef = useRef<HTMLDivElement>(null)
+
+    useLayoutEffect(() => {
+        if (!elRef.current) return
+        const range = document.createRange()
+        range.selectNode(elRef.current)
+        const documentFragment = range.createContextualFragment(markup)
+
+        // Inject the markup, triggering a re-run!
+        elRef.current.innerHTML = ''
+        elRef.current.append(documentFragment)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    return <div ref={elRef} dangerouslySetInnerHTML={{ __html: markup }}></div>
+}
+
+export default DangrousElement

packages/react-components/src/components/gif.tsx

@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import * as pingback from '../util/pingback'
 import AttributionOverlay from './attribution/overlay'
 import VerifiedBadge from './attribution/verified-badge'
+import DangerousElement from './dangerous-element'
 import { PingbackContext } from './pingback-context-manager'
 import { GifOverlayProps } from './types'
 
@@ -201,7 +202,6 @@ const Gif = ({
         onGifVisible(gif, e) // gif is visible, perhaps just partially
         setLoadedClassName(Gif.imgLoadedClassName)
     }
-
     useEffect(() => {
         // the id has changed, maybe the image has loaded
         if (image.current?.complete) {
@@ -289,7 +289,7 @@ const Gif = ({
                 />
                 {isAd &&
                     bottleData?.tags?.map((tag: string, index: number) => (
-                        <div dangerouslySetInnerHTML={{ __html: tag }} key={index} />
+                        <DangerousElement markup={tag} key={index} />
                     ))}
             </picture>
             {Overlay && (