react-simple-captcha - npm Package Compare versions

Comparing version 4.1.3 to 5.0.0

package.json

 {
   "name": "react-simple-captcha",
-  "version": "4.1.3",
+  "version": "5.0.0",
   "description": "A very simple and powerful captcha for ReactJS",
@@ -15,3 +15,3 @@ "main": "react-simple-captcha.js",
     "react",
-    "react-component",
+    "reactjs-captcha",
     "captcha",
@@ -27,6 +27,7 @@ "react-captcha",
   "homepage": "https://github.com/masroorejaz/react-simple-captcha#readme",
-  "peerDependencies": {
+  "dependencies": {
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "react-html-parser": "^2.0.2"
   }
 }

react-simple-captcha.js

@@ -0,3 +1,8 @@
+import { Component } from 'react';
+import ReactHtmlParser from 'react-html-parser';
+
 let captcha_value = '';
 let captcha_number = '';
+let LoadCanvasTemplate_HTML = "<div><canvas id=\"canv\"></canvas><div><a id=\"reload_href\"  style=\"cursor: pointer; color: blue\">Reload Captcha</a></div></div>";
+let LoadCanvasTemplateNoReload_HTML = "<div><canvas id=\"canv\"></canvas><div><a id=\"reload_href\"  style=\"cursor: pointer; color: blue\"></a></div></div>";;
 
@@ -37,7 +42,7 @@
         return b.length - a.length;
-    }); 
-    ctx.canvas.width = parseInt(length)*25;
+    });
+    ctx.canvas.width = parseInt(length) * 25;
     ctx.canvas.height = (lines.length * lineheight);
-     
 
+
     ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -63,8 +68,8 @@
 
-export const LoadCanvasTemplate = "<div><canvas id=\"canv\"></canvas><div><a id=\"reload_href\"  style=\"cursor: pointer; color: blue\">Reload Captcha</a></div></div>";
+//export const LoadCanvasTemplate = "<div><canvas id=\"canv\"></canvas><div><a id=\"reload_href\"  style=\"cursor: pointer; color: blue\">Reload Captcha</a></div></div>";
 
-export const LoadCanvasTemplateNoReload = '<div><canvas id="canv"></canvas><div><a id=\"reload_href\" ></a></div></div>';
- 
+//export const LoadCanvasTemplateNoReload = '<div><canvas id="canv"></canvas><div><a id=\"reload_href\" ></a></div></div>';
 
-export const validateCaptcha = (userValue,reload=true) => {
+
+export const validateCaptcha = (userValue, reload = true) => {
     if (userValue != captcha_value) {
@@ -74,3 +79,3 @@ if (reload == true) {
         }
-       
+
         return false;
@@ -84,4 +89,16 @@ }
 
+export class LoadCanvasTemplate extends Component {
 
- 
- 
+    render() {
+        return (ReactHtmlParser(LoadCanvasTemplate_HTML));
+    }
+
+};
+
+export class LoadCanvasTemplateNoReload extends Component {
+
+    render() {
+        return (ReactHtmlParser(LoadCanvasTemplateNoReload_HTML));
+    }
+
+};

README.md

@@ -15,29 +15,8 @@ # React Simple Captcha
  
- <p> Just follow these 6 easy steps to use the react simple captcha:</p>
+ <p> Just follow these 4 easy steps to use the react simple captcha:</p>
  
-**Prerequisite**  
- 
-**react-html-parser**
 
-   -  **Step 1:**  
-   
-Install 'react-html-parser'
-
-```sh
-$ npm install react-html-parser
-```
-
- -  **Step 2:**  
-  
-   Import 'react-html-parser'
-
-```sh
-import ReactHtmlParser from 'react-html-parser'; 
-```
-
-**Non-Prerequisite**   
-
 **react-simple-captcha** 
 
-   -  **Step 3:**  
+   -  **Step 1:**  
   
@@ -50,5 +29,5 @@ Import all functions from react-simple-captcha
 
-   -  **Step 4:**  
+   -  **Step 2:**  
   
-Place **LoadCanvasTemplate** or **LoadCanvasTemplateNoReload** *(if you do not want 'Reload Captcha' functionality)* in your render code in the function ReactHtmlParser()
+Place **<LoadCanvasTemplate />** or **<LoadCanvasTemplateNoReload />** *(if you do not want 'Reload Captcha' functionality)* in your render code in the function ReactHtmlParser()
 
@@ -58,3 +37,3 @@ ```sh
         return (<div>
-            {ReactHtmlParser(LoadCanvasTemplate)}
+           <LoadCanvasTemplate />
             </div>);
@@ -69,3 +48,3 @@ };
         return (<div>
-            {ReactHtmlParser(LoadCanvasTemplateNoReload)}
+            <LoadCanvasTemplateNoReload />
             </div>);
@@ -75,3 +54,3 @@ };
 
-   -  **Step 5:**  
+   -  **Step 3:**  
   
@@ -85,3 +64,3 @@ Paste **loadcaptchaenginge(6)** *(You can change 6 to number of captcha charcters you want)* in **componentDidMount**
 ```
-   -  **Step 6:**  
+   -  **Step 4:**  
   
@@ -132,4 +111,4 @@ Validate captcha by using **validateCaptcha(user_captcha_value)**
 | ------ | ------ |
-| **LoadCanvasTemplate** | It will load the captcha **with 'Reload Captcha'** functionality. Place between your render code, usage example **{ReactHtmlParser(LoadCanvasTemplate)}** |
-| **LoadCanvasTemplateNoReload** | It will load the captcha **without 'Reload Captcha'** functionality. Place between your render code, usage example **{ReactHtmlParser(LoadCanvasTemplateNoReload)}**  |
+| **<LoadCanvasTemplate />** | It will load the captcha **with 'Reload Captcha'** functionality. Place between your render code, usage example **{ReactHtmlParser(LoadCanvasTemplate)}** |
+| **<LoadCanvasTemplateNoReload />** | It will load the captcha **without 'Reload Captcha'** functionality. Place between your render code, usage example **{ReactHtmlParser(LoadCanvasTemplateNoReload)}**  |
 | **loadcaptchaenginge(*Number_Of_Captcha_Charcters*);** | Simply paste it in **componentDidMount()**. Pass number of captcha characters you want to display. |
@@ -178,3 +157,3 @@ | **validateCaptcha(*User_Submitted_Value*)** | Will return *true* if user submitted value matches with captcha otherwise *false*. Also will reload captcha if user submitted value is *false*  |
                     <div className="col mt-3">
-                        {ReactHtmlParser(LoadCanvasTemplate)}
+                        <LoadCanvasTemplate />
                     </div>
@@ -181,0 +160,0 @@

No alert changes

Improved metrics

Total package byte prevSize

9790

increased by4.38%

Lines of code

68

increased by23.64%

Worsened metrics

Dependency count

3

increased by50%

Number of lines in readme file

191

decreased by-9.91%

Dependency changes

• + Addedreact@^17.0.1

• + Addedreact-dom@^17.0.1

• + Addedreact-html-parser@^2.0.2

• + Addeddom-serializer@0.2.2(transitive)

• + Addeddomelementtype@1.3.12.3.0(transitive)

• + Addeddomhandler@2.4.2(transitive)

• + Addeddomutils@1.7.0(transitive)

• + Addedentities@1.1.22.2.0(transitive)

• + Addedhtmlparser2@3.10.1(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-html-parser@2.0.2(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreadable-stream@3.6.2(transitive)

• + Addedsafe-buffer@5.2.1(transitive)

• + Addedstring_decoder@1.3.0(transitive)

• + Addedutil-deprecate@1.0.2(transitive)