react-telegram-comments

react-telegram-comments

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!

Comments.app Features

• Light / 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 :blue_heart:

To-Do

• Add some tests

• Add prop for custom height

• Add prop for different color names

• Add prop for custom colors

• Add prop for icon outlines

• Write better documentation

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;
   

5. Done

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

Configuration and Customization Using Props

• customColor {string} optional Highlight color, hex value without # (null)

• customHeight {number} optional Custom widget height in pixels (null)

• commentsNumber {number} optional The number of comments to display (5)

• isDark {boolean} optional Use dark theme (false)

• 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)

• websiteKey: {string} required The Site ID

• containerClassName: {string} optional The components main container class ("telegram-comments")

• wrapperClassName: {string} optional The inner wrapper class, in case you need another one ("telegram-comments__wrapper")

Full Example

<TelegramComments
  customColor="fb9f9f"
  customHeight="450"
  commentsNumber={3}
  isDark
  pageId="about-page"
  showColorfulNames
  showDislikes
  showIconOutlines
  websiteKey={process.env.COMMENTS_APP_KEY}
  containerClassName="awesome-comments"
  wrapperClassName="awesome-comments__wrapper"
/>