2024-04-23 18:52:55 -05:00
|
|
|
import React, { useEffect, useRef } from 'react';
|
|
|
|
|
|
|
|
|
|
const ZapThreadsWrapper = ({ anchor, relays, disable }) => {
|
|
|
|
|
// Create a ref to store the reference to the <div> element
|
|
|
|
|
const zapRef = useRef(null);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Create a new <script> element
|
|
|
|
|
const script = document.createElement('script');
|
|
|
|
|
// Set the source URL of the script to load the ZapThreads library
|
|
|
|
|
script.src = 'https://unpkg.com/zapthreads/dist/zapthreads.iife.js';
|
|
|
|
|
// Set the script to load asynchronously
|
|
|
|
|
script.async = true;
|
|
|
|
|
|
|
|
|
|
// Function to handle the script load event
|
|
|
|
|
const handleScriptLoad = () => {
|
|
|
|
|
// Create a new <zap-threads> element
|
|
|
|
|
const zapElement = document.createElement('zap-threads');
|
|
|
|
|
zapElement.setAttribute('anchor', anchor);
|
|
|
|
|
zapElement.setAttribute('relays', relays);
|
|
|
|
|
zapElement.setAttribute('disable', disable);
|
|
|
|
|
|
|
|
|
|
// Remove any existing <zap-threads> element before appending a new one
|
|
|
|
|
if (zapRef.current && zapRef.current.firstChild) {
|
|
|
|
|
zapRef.current.removeChild(zapRef.current.firstChild);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Append the new <zap-threads> element to the <div> referenced by zapRef
|
|
|
|
|
if (zapRef.current) {
|
|
|
|
|
zapRef.current.appendChild(zapElement);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Attach the handleScriptLoad function to the script's load event
|
|
|
|
|
script.addEventListener('load', handleScriptLoad);
|
|
|
|
|
|
|
|
|
|
// Append the <script> element to the <body> of the document
|
|
|
|
|
document.body.appendChild(script);
|
|
|
|
|
|
|
|
|
|
// Cleanup function to remove the <zap-threads> element and the <script> element when the component is unmounted
|
|
|
|
|
return () => {
|
|
|
|
|
// Remove the <zap-threads> element from the <div> referenced by zapRef
|
|
|
|
|
if (zapRef.current && zapRef.current.firstChild) {
|
|
|
|
|
zapRef.current.removeChild(zapRef.current.firstChild);
|
|
|
|
|
}
|
|
|
|
|
// Remove the <script> element from the <body> of the document
|
|
|
|
|
document.body.removeChild(script);
|
|
|
|
|
// Remove the load event listener from the script
|
|
|
|
|
script.removeEventListener('load', handleScriptLoad);
|
|
|
|
|
};
|
|
|
|
|
}, [anchor, relays, disable]);
|
|
|
|
|
|
|
|
|
|
// Render a <div> element and attach the zapRef to it
|
2024-09-14 17:39:01 -05:00
|
|
|
return <div className="overflow-x-hidden" ref={zapRef} />;
|
2024-04-23 18:52:55 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ZapThreadsWrapper;
|
