react-utterances-github-comments
Version:
A lightweight React wrapper for Utterances GitHub comment system
34 lines (33 loc) • 1.72 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
const GithubComments = ({ repo, issueTerm, theme = "github-light", label, titleText = "Comentarios", loadingText = "Cargando comentarios...", className = "", }) => {
const [loading, setLoading] = useState(true);
useEffect(() => {
if (typeof window === "undefined")
return;
const timeout = setTimeout(() => {
const scriptParent = document.getElementById("utterances-thread");
if (!scriptParent)
return;
scriptParent.innerHTML = "";
const script = document.createElement("script");
script.src = "https://utteranc.es/client.js";
script.setAttribute("repo", repo);
script.setAttribute("issue-term", issueTerm);
script.setAttribute("theme", theme);
script.setAttribute("crossorigin", "anonymous");
script.async = true;
if (label)
script.setAttribute("label", label);
script.onload = () => setLoading(false);
script.onerror = () => {
setLoading(false);
console.error("Error loading Utterances script");
};
scriptParent.appendChild(script);
}, 0);
return () => clearTimeout(timeout);
}, [repo, issueTerm, theme, label]);
return (_jsxs("section", { className: className, children: [_jsx("h3", { style: { textAlign: "center" }, children: titleText }), loading && _jsx("p", { style: { textAlign: "center" }, children: loadingText }), _jsx("div", { id: "utterances-thread" })] }));
};
export default GithubComments;