react-utterances-github-comments
Version:
A lightweight React wrapper for Utterances GitHub comment system
36 lines (35 loc) • 1.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const GithubComments = ({ repo, issueTerm, theme = "github-light", label, titleText = "Comentarios", loadingText = "Cargando comentarios...", className = "", }) => {
const [loading, setLoading] = (0, react_1.useState)(true);
(0, react_1.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 ((0, jsx_runtime_1.jsxs)("section", { className: className, children: [(0, jsx_runtime_1.jsx)("h3", { style: { textAlign: "center" }, children: titleText }), loading && (0, jsx_runtime_1.jsx)("p", { style: { textAlign: "center" }, children: loadingText }), (0, jsx_runtime_1.jsx)("div", { id: "utterances-thread" })] }));
};
exports.default = GithubComments;