masroorejaz / react-simple-captcha Goto Github PK

I am creating a function-based react component and loading Enginge inside useEffect method.

  useEffect(() => {
    loadCaptchaEnginge(5, "blue");
  }, []);

But, when I tried to change the background color of the captcha it didn't work.

For international applications using various languages, it should be possible to change the text for "Reload captcha". Maybe as a prop?

SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
react-simple-captcha (1:0) @ eval

module.exports = require("react-simple-captcha");

I tried to use the plugin on my .tsx but it doesn't support it. The error is "Could not find a declaration file for module 'react-simple-captcha'"

For those looking for a way to get this working in Next.js or any SSR based environment. Do the following:

Step 1: Create a null reference to the library.

const [ReactCaptcha, setReactCaptcha] = useState(null as any)

Step 2: Dynamically load module using useLayoutEffect

useLayoutEffect(() => {
    async function loadModule() {
      setReactCaptcha(await import('react-simple-captcha'))
    }
    loadModule()
}, [])

Step 3: have a useState() hook for rendering the Captcha Component.

useLayoutEffect(() => {
    if (ReactCaptcha) {
      setRender(true)
    }
}, [ReactCaptcha])

useEffect(() => {
    if (render) {
      setTimeout(() => {
        ReactCaptcha.loadCaptchaEnginge(6, '#07090e', 'rgb(0, 200, 0)', 'lower')
      }, 250)
    }
}, [render])

Step 4: Render Captcha Component only when it's ready to be rendered.

return (
  <div>
    <div className="captcha">
      {render ? <ReactCaptcha.LoadCanvasTemplate /> : null}
    </div>
  </div>
)

I have seen in the documentation that it allows for uppercase+numbers or lowercase+numbers, Is there way to put numbers only captcha

let LoadCanvasTemplate_HTML = "<div><canvas id=\"canv\"></canvas><div><a id=\"reload_href\"  style=\"cursor: pointer; color: blue\">Reload Captcha</a></div></div>";

Link styled inline is hard to override, please leave it for user css
Color blue looks bad on blue background

Can I resize the capcha size without make it blur ? I tried to change Canvas width with css but make the text blur.

It just say

Server Error
SyntaxError: Cannot use import statement outside a module

i am not able to use my component two time within same page

Hi

I am getting the below mentioned error after installing latest version of react-simple-captcha : 9.0.2

anything i am missing ?

Thank you

Hello,
I nest using this package it shows me this error

error - .../node_modules/react-simple-captcha/react-simple-captcha.js:1
import React, { Component } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Tried to load both parser.

Module not found: Error: Can't resolve 'buffer' in 'learn/node_modules/react-html-parser/node_modules/htmlparser2/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }

I followed the steps and when I added the < LoadCanvasTemplate /> or < LoadCanvasTemplateNoReload />, I'm getting this error. SyntaxError: Cannot use import statement outside a module. I'm using Next.js 9.5.5

Hey! Can you please fix this spelling error?

It's showing "Reload Captach". It's supposed to be "Reload Captcha"

Until now I can't find a good way to use it with typescript cause there's no type exported in the lib.

Not working with react 18^

Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

There is a typo on the canvas reload link it reads "Reload Captach" rather then "Reload Captcha"

hi ,
Is it possible to use custom css patterns as background captcha text?

Unable to run the test cases after importing it into the component getting below error
cannot use import statement outside a module react js

Hello @masroorejaz ,
In reloadText of LoadCanvasTemplate, I can't use a variable with a string. I load all of my string as a JSON file in page:

import STRINGES from "./string.json";
.
.
.
<LoadCanvasTemplate reloadText={STRINGES.reload} />

I would like the generated code, which is obviously burnt in a picture, send in email.
Is there a way to do that?

So I have set the 'loadCaptchaEngine' and the and I want to send the appearing code in email. I know how to send email in my code, I just want to extract the picture/code somehow.

Could you please tell me how I can acquire that?

Using react-remix, attempting to run locally I receive this issue:

import { Component } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:827:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/brooke/Personal Projects/remix-website/build/index.js:113:168)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "dev:server" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This should be solvable by making the package.json contain {"type": "module"} but I'm not sure if that will fix this.