react-telegram-comments

react-telegram-comments v2

A really simple React component/library to allow website visitors to comment and interact with others using their Telegram's account.

References:

• Telegram - Comments.app
• What is Telegram?

Motivation

The main motivation for this component is to a provide a lightweight alternative to Discord (and similar services) to handle comments in websites.

See it in action!:

• Example page
• On my personal website

Comments.app Features

• Light and dark themes
• Customization for UI colors and icons
• Allow to reply to comments
• Like or dislike options
• Customize the number of comments to show
• Ability to add other users as Administrators or Moderators
• Ability to delete comments and ban users
• Suscribe to comments (using your Telegram account and @discussbot)

Created by Telegram 💙

How to Use

1. Sign-up to comments.app, add your site and get a valid Site ID for your domain.

2. Add the component package to your project with yarn add react-telegram-comments or npm install react-telegram-comments.

3. Import the component in your pages or components:

   import { TelegramComments } from "react-telegram-comments";

4. Add TelegramComments to your component or page:

   const Comments = () => <TelegramComments websiteKey={websiteKey} />;
   
   export default Comments;

Important: Have in mind that for the moment the widget doesn't work with local domains. You'll need to publish your website to see it in action.

Configuration and Customization Using Props

• commentsNumber {number} optional The number of comments to display (5)
• containerClassName: {string} optional The components main container class ("telegram-comments")
• customColor {string} optional Highlight color, hex value without # (null)
• customHeight {number} optional Custom widget height in pixels (null)
• onLoad: {} optional Callback function to be executed when the external script is loaded
• pageId {string} optional Unique identifier of the page. Page URL by default (null)
• showColorfulNames {boolean} optional Use different color for usernames (false)
• showDislikes {boolean} optional Add the dislike option for comments (true)
• showIconOutlines {boolean} optional Display outlined icons (false)
• useDarkMode {boolean} optional Use dark theme (false)
• websiteKey: {string} required The Site ID
• wrapperClassName: {string} optional The inner wrapper class, in case you need another one (E.g. "telegram-comments__wrapper")

Full Example

<TelegramComments
  commentsNumber={3}
  containerClassName="awesome-comments"
  customColor="663399"
  customHeight="450"
  isDark
  onLoad={() => console.log("Comments loaded!")}
  pageId="about-page"
  showColorfulNames
  showDislikes
  showIconOutlines
  websiteKey={process.env.COMMENTS_APP_KEY}
  wrapperClassName="awesome-comments__wrapper"
/>

Change log

v2.0.0

• Rewrite component using modern TypeScript and React.
• New, simplified build system using tsc only.
• Automatted builds and NPM publish using github actions.
• Add unitary tests (finally!).
• Enhanced documentation and demo page added.
• isDark prop renamed to useDarkMode (only breaking change from v1)
• Add onLoad callback prop

---

Proudly made in 🇦🇷