react-utterances-github-comments

💬 A lightweight React wrapper for Utterances, the GitHub-powered comment widget.

✨ Features

• ✅ Lightweight and framework-agnostic (just React)
• 📝 Uses GitHub issues to store comments
• 🎨 Theme support (light, dark, preferred-color-scheme)
• 💻 Ideal for blogs, documentation, or static sites

📦 Installation

npm install react-utterances-github-comments

or

yarn add react-utterances-github-comments

🚀 Usage

import GithubComments from 'react-utterances-github-comments';

function BlogPost() {
  return (
    <GithubComments
      repo="your-username/your-repo"
      issueTerm="pathname"
      theme="github-light"
      label="comentario"
      titleText="Deja tu comentario"
      loadingText="Cargando comentarios..."
    />
  );
}

⚙️ Props

| Prop | Type | Required | Description | |---------------|----------|----------|-------------| | repo | string | ✅ | GitHub repo in the format user/repo | | issueTerm | string | ✅ | How issues are matched: pathname, url, title, etc. | | theme | string | ❌ | Utterances theme (github-light, github-dark, etc.) | | label | string | ❌ | GitHub issue label | | titleText | string | ❌ | Title shown above the comment box | | loadingText | string | ❌ | Text shown while Utterances is loading | | className | string | ❌ | Custom class for the wrapping <section> |

🧪 Example with dynamic theme switching

const [theme, setTheme] = useState('github-light');

return (
  <>
    <select onChange={(e) => setTheme(e.target.value)}>
      <option value="github-light">Light</option>
      <option value="github-dark">Dark</option>
      <option value="preferred-color-scheme">Auto</option>
    </select>

    <GithubComments
      repo="your-username/your-repo"
      issueTerm="pathname"
      theme={theme}
    />
  </>
);

📄 License

MIT

✍️ Author

Made with ❤️ by Percy Chuzon
📧 [email protected]
🔗 GitHub