captcha-generator-react - npm Package Compare versions

Comparing version 1.6.6 to 1.6.7

package.json

 {
   "name": "captcha-generator-react",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "main": "index.mjs",
@@ -5,0 +5,0 @@ "types": "index.d.ts",

README.md

@@ -26,3 +26,3 @@ # Generate captcha
 
-# Usage
+# Usage in plain React.
 
@@ -51,4 +51,7 @@ ```js
           e.preventDefault();
-          console.log();
-          console.log(captchaText === captcha);
+          if (captchaText === captcha) {
+            alert("success");
+          } else {
+            alert("fail");
+          }
         }}
@@ -72,2 +75,50 @@ >
 
+# Usage in Nextjs server components (v13 and up).
+
+```js
+"use client";
+import generateCaptcha from "generate-captcha";
+import { useEffect, useState } from "react";
+
+function CaptchaGenerator() {
+  const [captcha, setCaptcha] = useState("");
+  const [captchaText, setCaptchaText] = useState("");
+  const [captchaImage, setCaptchaImage] = useState(null);
+
+  useEffect(() => {
+    const { text, imgUrl } = generateCaptcha();
+    setCaptchaText(text);
+    setCaptchaImage(imgUrl);
+  }, []);
+
+  return (
+    <>
+      <img src={captchaImage || undefined} alt="" className="mb" />
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (captchaText === captcha) {
+            alert("success");
+          } else {
+            alert("fail");
+          }
+        }}
+      >
+        <input
+          type="text"
+          name="captcha"
+          onChange={(e) => {
+            setCaptcha(e.target.value);
+          }}
+        />
+        <button>Submit</button>
+      </form>
+    </>
+  );
+}
+
+export default CaptchaGenerator;
+```
+
 # Customize
@@ -74,0 +125,0 @@

No alert changes

Improved metrics

Total package byte prevSize

4922

29.42%

Number of lines in readme file

129

65.38%

No dependency changes