react-telegram-comments - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.d.ts

 /// <reference types="react" />
 declare type TelegramCommentsProps = {
+    customColor: string;
+    customHeight: number;
     commentsNumber: number;
     containerClassName: string;
     isDark: boolean;
+    pageId: string;
+    showColorfulNames: boolean;
     showDislikes: boolean;
+    showIconOutlines: boolean;
     websiteKey: string;
@@ -11,3 +16,3 @@ wrapperClassName: string;
 declare const TelegramComments: {
-    ({ commentsNumber, containerClassName, isDark, showDislikes, websiteKey, wrapperClassName }: TelegramCommentsProps): JSX.Element;
+    ({ customColor, customHeight, commentsNumber, containerClassName, isDark, pageId, showColorfulNames, showDislikes, showIconOutlines, websiteKey, wrapperClassName }: TelegramCommentsProps): JSX.Element;
     defaultProps: {
@@ -17,2 +22,3 @@ commentsNumber: number;
         isDark: boolean;
+        showColorfulNames: boolean;
         showDislikes: boolean;
@@ -19,0 +25,0 @@ wrapperClassName: string;

dist/index.js

@@ -7,2 +7,3 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var COMMENTS_APP_SCRIPT = "https://comments.app/js/widget.js?3";
+React.createElement("script", { async: true, src: "https://comments.app/js/widget.js?3", "data-height": "300", "data-page-id": "myPage", "data-color": "8EC6EB", "data-outlined": "1", "data-colorful": "1", "data-dark": "1" });
 var TelegramCommentsDefaultProps = {
@@ -12,2 +13,3 @@ commentsNumber: 5,
     isDark: false,
+    showColorfulNames: false,
     showDislikes: true,
@@ -17,3 +19,3 @@ wrapperClassName: "telegram-comments__wrapper"
 var TelegramComments = function (_a) {
-    var commentsNumber = _a.commentsNumber, containerClassName = _a.containerClassName, isDark = _a.isDark, showDislikes = _a.showDislikes, websiteKey = _a.websiteKey, wrapperClassName = _a.wrapperClassName;
+    var customColor = _a.customColor, customHeight = _a.customHeight, commentsNumber = _a.commentsNumber, containerClassName = _a.containerClassName, isDark = _a.isDark, pageId = _a.pageId, showColorfulNames = _a.showColorfulNames, showDislikes = _a.showDislikes, showIconOutlines = _a.showIconOutlines, websiteKey = _a.websiteKey, wrapperClassName = _a.wrapperClassName;
     try {
@@ -29,6 +31,11 @@ // if no Website keys is passed do nothing
             script.async = true;
-            script.setAttribute('data-comments-app-website', websiteKey);
+            customColor && script.setAttribute('data-color', customColor);
+            customHeight && script.setAttribute('data-height', customHeight);
+            script.setAttribute('data-limit', commentsNumber);
             isDark && script.setAttribute('data-dark', "1");
+            pageId && script.setAttribute('data-page-id', pageId);
+            showColorfulNames && script.setAttribute('data-colorful', "1");
             showDislikes && script.setAttribute('data-dislikes', "1");
-            script.setAttribute('data-limit', commentsNumber);
+            showIconOutlines && script.setAttribute('data-outlined', "1");
+            script.setAttribute('data-comments-app-website', websiteKey);
             if (placeholderRef_1.current) {
@@ -35,0 +42,0 @@ placeholderRef_1.current.appendChild(script);

package.json

 {
   "name": "react-telegram-comments",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple React component/librarty to integrate comments using Telegram's comments.app",
   "main": "dist/index.js",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
@@ -8,0 +10,0 @@ "build": "rollup -c",

README.md

 # react-telegram-comments
-A simple React component/librarty to integrate comments using Telegram's comments.app
+
+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](https://comments.app/)
+- [What is Telegram?](https://telegram.org/faq#q-what-is-telegram-what-do-i-do-here)
+
+## 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!](https://actionauta.com/notes/integrating-tailwind-css-modules-sass-stylelint-nextjs)
+
+## 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](https://t.me/discussbot))
+- Created by [Telegram](https://telegram.org) :blue_heart:
+
+## To-Do
+
+- [ ] Add some tests
+- [x] Add prop for custom height
+- [x] Add prop for different color names
+- [x] Add prop for custom colors
+- [x] Add prop for icon outlines
+- [x] Write better documentation
+
+    
+
+## How to Use
+
+1. Sign-up to [comments.app](https://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:
+    ```javascript
+    import TelegramComments from 'react-telegram-comments';
+    ```
+4. Add `TelegramComments` to your component or page:
+    ```javascript
+    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
+
+```javascript
+<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"
+/>
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13543

increased by70.93%

Lines of code

76

increased by22.58%

Number of lines in readme file

96

increased by3100%

No dependency changes