{"id":13739892,"url":"https://github.com/masroorejaz/react-simple-captcha","last_synced_at":"2025-05-08T19:35:06.505Z","repository":{"id":37970744,"uuid":"310780952","full_name":"masroorejaz/react-simple-captcha","owner":"masroorejaz","description":"A very simple and powerful captcha for ReactJS","archived":false,"fork":false,"pushed_at":"2023-12-06T07:50:54.000Z","size":1071,"stargazers_count":39,"open_issues_count":1,"forks_count":18,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-22T19:23:07.586Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/masroorejaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-07T06:16:21.000Z","updated_at":"2024-06-21T20:44:41.000Z","dependencies_parsed_at":"2024-06-18T16:48:22.677Z","dependency_job_id":"067bddca-fcd9-4a0c-a7cb-7b101e7e198d","html_url":"https://github.com/masroorejaz/react-simple-captcha","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masroorejaz%2Freact-simple-captcha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masroorejaz%2Freact-simple-captcha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masroorejaz%2Freact-simple-captcha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masroorejaz%2Freact-simple-captcha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/masroorejaz","download_url":"https://codeload.github.com/masroorejaz/react-simple-captcha/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224758230,"owners_count":17364973,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T04:00:38.968Z","updated_at":"2024-11-15T09:30:52.544Z","avatar_url":"https://github.com/masroorejaz.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/masroorejaz"],"categories":["UI Components"],"sub_categories":["Captcha"],"readme":"# React Simple Captcha\r\n\r\nReact Simple Captcha is a very powerful, highly customizable and easy to use captcha for React JS. \r\n\r\n **Install** \r\n```sh\r\n$ npm install react-simple-captcha\r\n```\r\n\r\n**Demo**   \r\nDemo can be seen [here](https://scriptse.com/blog/add-captcha-in-reactjs-application/react-simple-captcha-demo/ \"React Simple Captcha Demo\").\r\n \r\n **Usage Guide** \r\n \r\n \u003cp\u003e Just follow these 4 easy steps to use the react simple captcha:\u003c/p\u003e\r\n \r\n\r\n   -  **Step 1:**  \r\n  \r\n  Import all functions from react-simple-captcha\r\n\r\n  ```sh\r\nimport { loadCaptchaEnginge, LoadCanvasTemplate, LoadCanvasTemplateNoReload, validateCaptcha } from 'react-simple-captcha';\r\n```\r\n\r\n   -  **Step 2:**  \r\n  \r\nPlace **\u003c LoadCanvasTemplate /\u003e** or **\u003c LoadCanvasTemplateNoReload /\u003e** *(if you do not want 'Reload Captcha' functionality)* in your render code\r\n\r\n   ```sh\r\n render() {\r\n        return (\u003cdiv\u003e\r\n           \u003cLoadCanvasTemplate /\u003e\r\n            \u003c/div\u003e);\r\n    };\r\n```\r\n\r\n **OR**\r\n \r\n   ```sh\r\n render() {\r\n        return (\u003cdiv\u003e\r\n            \u003cLoadCanvasTemplateNoReload /\u003e\r\n            \u003c/div\u003e);\r\n    };\r\n```\r\n\r\n   -  **Step 3:**  \r\n  \r\nPaste **loadCaptchaEnginge(6)** *(You can change 6 to number of captcha charcters you want)* in **componentDidMount**\r\n\r\n   ```sh\r\n componentDidMount () {\r\n       loadCaptchaEnginge(6); \r\n    };\r\n```\r\n   -  **Step 4:**  \r\n  \r\nValidate captcha by using **validateCaptcha(user_captcha_value)** \r\n\r\n   \r\n   ```sh\r\n doSubmit = () =\u003e {\r\n\u003c! --   let's assume there is an HTML input text box with id 'user_captcha_input' to get user input --\u003e   \r\n        let user_captcha_value = document.getElementById('user_captcha_input').value;\r\n\r\n        if (validateCaptcha(user_captcha_value)==true) {\r\n            alert('Captcha Matched');\r\n        }\r\n\r\n        else {\r\n            alert('Captcha Does Not Match');\r\n        }\r\n    };\r\n```\r\n\r\n**OR**  \r\nIf you don't want captcha to be reloaded if user enter the wrong value then set second parameter to *false* **validateCaptcha(user_captcha_value, false)**\r\n\r\n \r\n ```sh\r\n doSubmit = () =\u003e {\r\n\u003c! --   let's assume there is an HTML input text box with id 'user_captcha_input' to get user input --\u003e    \r\n        let user_captcha_value = document.getElementById('user_captcha_input').value;\r\n\r\n        if (validateCaptcha(user_captcha_value, false)==true) {\r\n            alert('Captcha Matched');\r\n        }\r\n\r\n        else {\r\n            alert('Captcha Does Not Match');\r\n        }\r\n    };\r\n```\r\n\r\n \r\n### Options\r\n\r\nListed are all the options available for react-simple-captcha\r\n\r\n| Name | Description |\r\n| ------ | ------ |\r\n| **\u003c LoadCanvasTemplate /\u003e** | It will load the captcha **with 'Reload Captcha'** functionality. Place between your render code, usage example **\u003c LoadCanvasTemplate /\u003e** |\r\n| **\u003c LoadCanvasTemplateNoReload /\u003e** | It will load the captcha **without 'Reload Captcha'** functionality. Place between your render code, usage example **\u003c LoadCanvasTemplateNoReload /\u003e**  |\r\n| **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*);** | Simply paste it in **componentDidMount()**. Pass number of captcha characters you want to display. |\r\n| **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*  |\r\n| **validateCaptcha(*User_Submitted_Value*, *false*)** | Will return *true* if user submitted value matches with captcha otherwise *false*. Will not reload captcha if user submitted value is *false*  |\r\n  \r\n### Optional Changes\r\n  \r\n    \r\n| **Options** | **All of these changes are optionals** |\r\n| ------ | ------ |\r\n| **\u003c LoadCanvasTemplate reloadText=\"Reload My Captcha\" /\u003e** | If you want to change the **\"Reload Captcha\"** with your own text |\r\n| **\u003c LoadCanvasTemplate reloadColor=\"red\" /\u003e** | If you want to change the blue color of **\"Reload Captcha\"** |\r\n| **\u003c LoadCanvasTemplate reloadText=\"Reload My Captcha\" reloadColor=\"red\" /\u003e** | If you want to change the **\"Reload Captcha\"** text and it's blue color |\r\n|  **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*);**  | If you want to change the background color from black to your custom color. Example Syntax to change the background color to red use: **loadCaptchaEnginge(6,'red');** |\r\n|  **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*);**  | If you want to change the font color from white to your custom color. Example Syntax to change the font color to blue use: **loadCaptchaEnginge(6,'','blue');** |\r\n|  **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*);**  | If you want to change the both background and font color. Example Syntax to change the background color to white and font color to black use: **loadCaptchaEnginge(6,'white','black');** |\r\n|  **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Upper_Characters_Only*);**  | If you want only upper characters and numbers use **loadCaptchaEnginge(6,'','','upper');** |\r\n|  **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Lower_Characters_Only*);**  | If you want only lower characters and numbers use **loadCaptchaEnginge(6,'','','lower');** |\r\n|  **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Numbers*);**  | If you want only numbers use **loadCaptchaEnginge(6,'','','numbers');** |\r\n|  **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Special_Characters*);**  | If you want only special characters use **loadCaptchaEnginge(6,'','','special_char');** |\r\n \r\n### Example\r\nLet's create a class name **CaptchaTest** with react simple captcha functionality:\r\n\r\n ```sh\r\nimport React, { Component } from 'react';\r\nimport { loadCaptchaEnginge, LoadCanvasTemplate, LoadCanvasTemplateNoReload, validateCaptcha } from 'react-simple-captcha';\r\n\r\n\r\n\r\nclass CaptchaTest extends Component {\r\n\r\n    componentDidMount () {\r\n       loadCaptchaEnginge(6); \r\n    };\r\n\r\n    doSubmit = () =\u003e {\r\n        let user_captcha = document.getElementById('user_captcha_input').value;\r\n\r\n        if (validateCaptcha(user_captcha)===true) {\r\n            alert('Captcha Matched');\r\n            loadCaptchaEnginge(6); \r\n            document.getElementById('user_captcha_input').value = \"\";\r\n        }\r\n\r\n        else {\r\n            alert('Captcha Does Not Match');\r\n            document.getElementById('user_captcha_input').value = \"\";\r\n        }\r\n    };\r\n \r\n    render() {\r\n         \r\n\r\n        return (\u003cdiv\u003e\r\n            \u003cdiv className=\"container\"\u003e\r\n                \u003cdiv className=\"form-group\"\u003e\r\n\r\n                    \u003cdiv className=\"col mt-3\"\u003e\r\n                        \u003cLoadCanvasTemplate /\u003e\r\n                    \u003c/div\u003e\r\n\r\n                    \u003cdiv className=\"col mt-3\"\u003e\r\n                        \u003cdiv\u003e\u003cinput placeholder=\"Enter Captcha Value\" id=\"user_captcha_input\" name=\"user_captcha_input\" type=\"text\"\u003e\u003c/input\u003e\u003c/div\u003e\r\n                    \u003c/div\u003e\r\n\r\n                    \u003cdiv className=\"col mt-3\"\u003e\r\n                        \u003cdiv\u003e\u003cbutton class=\"btn btn-primary\" onClick={() =\u003e this.doSubmit()}\u003eSubmit\u003c/button\u003e\u003c/div\u003e\r\n                    \u003c/div\u003e\r\n                      \r\n                \u003c/div\u003e\r\n\r\n            \u003c/div\u003e\r\n        \u003c/div\u003e);\r\n    };\r\n}\r\n\r\nexport default CaptchaTest;\r\n```\r\nImport **CaptchaTest** in index.js\r\n ```sh\r\nimport CaptchaTest from './captcha_test'; \r\n```\r\nNow replace **ReactDOM.render** with\r\n ```sh\r\nReactDOM.render(\u003cCaptchaTest /\u003e, document.getElementById('root'));\r\n```\r\n### Common Issues  \r\n\r\n**Not Woking on ReactJS Version 18^**  \r\nSolution Here: https://github.com/masroorejaz/react-simple-captcha/issues/23  \r\n\r\n**Not Woking on Next.js**  \r\nSolution Here: https://github.com/masroorejaz/react-simple-captcha/issues/32  \r\n\r\n**Not Woking with TypeScript**  \r\nSolution Here: https://github.com/masroorejaz/react-simple-captcha/issues/33  \r\n\r\n### Support Me  \r\nhttps://www.buymeacoffee.com/masroorejaz\r\n\r\n### Browser support\r\nWorks in every modern browser which has support for [canvas element](https://caniuse.com/canvas-text \"canvas element\").\r\n\r\n### License\r\nreact-simple-captcha is licensed under the [MIT license](https://opensource.org/licenses/MIT \"MIT license\").\r\n\r\n### Developer Profile\r\n \r\n**Name:** Masroor Ejaz  \r\n**Linkedin:** https://www.linkedin.com/in/masroorejaz/  \r\n**Twitter:** https://twitter.com/masroorejaz  \r\n**Note:** Feel free to contact me if you have any questions!\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasroorejaz%2Freact-simple-captcha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasroorejaz%2Freact-simple-captcha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasroorejaz%2Freact-simple-captcha/lists"}