import { useEffect, useState, useRef } from "react";
const twitterWidgetJs = "https://platform.twitter.com/widgets.js";
const message = "Loading tweet..."
export default function TwitterEmbed({ url }) {
let ref = useRef(null)
const [state, setState] = useState({
isLoading: true,
message: message
})
const tweetId = url.split("status/").pop()
var callbacks = [];
const loadScript = (src, cb) => {
if (callbacks.length === 0) {
callbacks.push(cb);
var s = document.createElement("script");
s.setAttribute("src", src);
s.setAttribute("async", "true");
s.onload = () => callbacks.forEach((cb) => cb());
document.head.appendChild(s);
} else {
callbacks.push(cb);
}
}
useEffect(() => {
if (!ref.current) return;
const renderTweet = () => {
window.twttr.widgets.createTweet(tweetId, ref.current, {
theme: "dark"
}).then((el) => {
if (el) return setState(prev => ({ ...prev, isLoading: false }))
return setState(prev => ({ ...prev, message: "Sorry, this tweet could not be found." }))
})
}
if (!window.twttr) {
loadScript(twitterWidgetJs, renderTweet)
} else {
renderTweet()
}
return () => {
setState(prev => ({ ...prev, isLoading: true }));
};
},[]);
return (
<>
{state.isLoading && (
)}
);
}