react-telegram-comments - npm Package Compare versions

Comparing version 2.0.0-beta.6 to 2.0.0

package.json

 {
   "name": "react-telegram-comments",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0",
   "description": "A simple React component/librarty to integrate comments using Telegram's comments.app",
@@ -5,0 +5,0 @@ "main": "./dist/cjs/index.js",

README.md

@@ -1,3 +0,8 @@
-# react-telegram-comments
+# react-telegram-comments v2
 
+[![NPM version][npm-image]][npm-url]
+[![Build][github-build]][github-build-url]
+![npm-typescript]
+[![License][github-license]][github-license-url]
+
 A really simple React component/library to allow website visitors to comment and interact with others using their Telegram's account.
@@ -14,7 +19,10 @@
 
-[See it in action!](https://actionauta.com/notes/integrating-tailwind-css-modules-sass-stylelint-nextjs)
+See it in action!:
 
+- [Example page](https://sveggiani.github.io/react-telegram-comments)
+- [On my personal website](https://actionauta.com/notes/integrating-tailwind-css-modules-sass-stylelint-nextjs)
+
 ## Comments.app Features
 
-- Light / Dark themes
+- Light and dark themes
 - Customization for UI colors and icons
@@ -27,13 +35,5 @@ - Allow to reply to comments
 - Suscribe to comments (using your Telegram account and [@discussbot](https://t.me/discussbot))
-- Created by [Telegram](https://telegram.org) :blue_heart:
 
-## To-Do
+_Created by [Telegram](https://telegram.org)_ :blue_heart:
 
-- [ ] 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
@@ -45,3 +45,3 @@
    ```javascript
-   import TelegramComments from "react-telegram-comments";
+   import { TelegramComments } from "react-telegram-comments";
    ```
@@ -56,12 +56,11 @@ 4. Add `TelegramComments` to your component or page:
 
-5. Done
+_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.
 
-_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
 
+- `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`)
-- `commentsNumber` _{number}_ _optional_ The number of comments to display (`5`)
-- `isDark` _{boolean}_ _optional_ Use dark theme (`false`)
+- `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`)
@@ -71,5 +70,5 @@ - `showColorfulNames` _{boolean}_ _optional_ Use different color for usernames (`false`)
 - `showIconOutlines` _{boolean}_ _optional_ Display outlined icons (`false`)
+- `useDarkMode` _{boolean}_ _optional_ Use dark theme (`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"`)
+- `wrapperClassName`: _{string}_ _optional_ The inner wrapper class, in case you need another one (E.g. `"telegram-comments__wrapper"`)
 
@@ -80,6 +79,8 @@ ### Full Example
 <TelegramComments
-  customColor="fb9f9f"
+  commentsNumber={3}
+  containerClassName="awesome-comments"
+  customColor="663399"
   customHeight="450"
-  commentsNumber={3}
   isDark
+  onLoad={() => console.log("Comments loaded!")}
   pageId="about-page"
@@ -90,5 +91,28 @@ showColorfulNames
   websiteKey={process.env.COMMENTS_APP_KEY}
-  containerClassName="awesome-comments"
   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
+
+---
+
+[npm-url]: https://www.npmjs.com/package/react-telegram-comments
+[npm-image]: https://img.shields.io/npm/v/react-telegram-comments
+[github-license]: https://img.shields.io/github/license/sveggiani/react-telegram-comments
+[github-license-url]: https://github.com/sveggiani/react-telegram-comments/blob/master/LICENSE
+[github-build]: https://github.com/sveggiani/react-telegram-comments/actions/workflows/publish.yml/badge.svg
+[github-build-url]: https://github.com/sveggiani/react-telegram-comments/actions/workflows/publish.yml
+[npm-typescript]: https://img.shields.io/npm/types/react-telegram-comments
+
+Proudly made in :argentina:

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18791

increased by6.79%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

112

increased by27.27%

No dependency changes