From 48cbd1f0d9c55100f049ea22cb4448c3944c910e Mon Sep 17 00:00:00 2001 From: khalilcodes Date: Wed, 18 May 2022 19:01:23 +0300 Subject: [PATCH] [site/components][md]: create twitter embed component --- site/components/TwitterEmbed.js | 86 +++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 site/components/TwitterEmbed.js diff --git a/site/components/TwitterEmbed.js b/site/components/TwitterEmbed.js new file mode 100644 index 0000000..4fd1956 --- /dev/null +++ b/site/components/TwitterEmbed.js @@ -0,0 +1,86 @@ +import { useEffect, useState, useRef } from "react"; + +const twitterWidgetJs = "https://platform.twitter.com/widgets.js"; + +export default function TwitterEmbed({ url }) { + let ref = useRef(null) + const [isLoading, setLoading] = useState(true) + + 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(() => { + setLoading(false) + }) + } + + if (!window.twttr) { + loadScript(twitterWidgetJs, renderTweet) + } else { + renderTweet() + } + + return () => { + setLoading(true); + }; + },[]); + + return ( + <> + {isLoading &&
+
+ + Twitter + + + Loading tweet... +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
} +
+ + ); +}