Learn in 
Have you used Disqus commenting system ? Undoubtedly, It is pretty easy to use application. However, it comes with a price, its not free. Even the Basic plan is Ad Supported, meaning, your commenting section will be filled with Ads. This does not look user friendly when your visitors want to comment on something interesting.
These are exactly the same issues we faced when this website is being setup. Can you believe that you can setup your commenting system by just including a single component ? That too with just a single line to import and another line to use it ? Does it amaze you if that commenting system is free for one website with full fledged feature list ?
We felt exactly the same. Well !! it was not easy for us to create a React Component that can be reusuable. OK, that application is called WidgetPack. It comes with a lot of other widgets too but we are going to cover only comments component for now. We made it more easier for you to use WidgetPack comments by creating an npm module named : react-widgetpack-comments
Follow step by step instructions below:
1. Register with widgetpack:
First step is to register with widgetpack here: WidgetPack
Once registered, Navigate to Site > Install and you will see the above screen with some code. The redacted section will have your unique id. You can think of this id as a publisher id that is unique for every registered user.
The code is straight forward if you are using plain HTML. But you need to do a lot of sweating to make it work with React. This is where
react-widgetpack-comments comes into picture. But, more on that later.The user interface of widgetpack is very user friendly and pretty basic. You can Approve, Reject, Delete any comments as a moderator. The free plan offers one moderator. Below is a screenprint of the moderator's user interface.
2. Install "react-widgetpack-comments" npm module:
Install the npm module using the below command:
npm i react-widgetpack-comments3. Import module and use it:
Import the component as:
import ReactWidgetPackComments from 'react-widgetpack-comments';Include the component as:
<ReactWidgetPackComments id={unique-id} enable={true} /> Remember!
1. unique-id - is the unique id assigned by widget pack when account is created
2. enable - true to enable the component, false otherwise. This parameter is useful while working in development environment. You dont want someone accidentally entering comments.
Note: No need to worry about page specific comments, WidgetPack will take care of that for you depending on the URL. As long as the URLs are unique, you will get page specific comments.4. Run the application:
We have created a demo application. Find the source in the "Download Source" at the bottom of this page. When you run the demo application, you should see something like below,
In order to post your comments, click on the "Login" link. You should see a screen with all the available social media login options. As a moderator, you can control which social media options needs to be enabled or disabled to your website users as per your choice.
If you select google for instance, you should be directed to the login screen as below:
Now, go ahead and post your comment. Once posted, your comments will appear as below:
WidgetPack comments makes your life easier by reducing your development time in setting up a commenting system quickly for your website. We are not saying to promote it. We are infact using it and wanted to share our experience.
This screen also uses the same so go ahead and post your first comments and try out the commenting system at the bottom of the screen. While doing so, let us know your thoughts and experience as well. Happy commenting !!
Thats all folks !! Happy coding. If you feel this helped you, keep supporting us by or or below or on the articles on social media.
Previous Article
React Proxy Backend API configuration - Apache Http Server, Nginx, TomcatNext Article
React Router Configuration - Create React App - Step by Step Configuration
