import { useEffect, useState, useRef } from "react";
const twitterWidgetJs = "https://platform.twitter.com/widgets.js";
const message = "Loading tweet...";
export default function TwitterEmbed({ url, ...props }) {
let ref = useRef(null);
const [state, setState] = useState({
isLoading: true,
message: message,
});
const tweetId = url.split("status/").pop();
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: null
}));
});
return window.twttr.widgets.load(ref.current);
};
useEffect(() => {
let componentMounted = true;
const script = document.createElement("script");
script.src = twitterWidgetJs;
script.async = true;
script.onload = () => renderTweet();
if (componentMounted) {
if (!window.twttr) {
document.head.appendChild(script);
} else {
renderTweet();
}
}
return () => {
setState({ isLoading: true, message: message });
componentMounted = false;
};
}, []);
return (
<>
{state.isLoading && state.message && (
)}
{!state.message && }
);
}