);
45 | };
46 | ```
47 |
48 | - **Step 3:**
49 |
50 | Paste **loadCaptchaEnginge(6)** *(You can change 6 to number of captcha charcters you want)* in **componentDidMount**
51 |
52 | ```sh
53 | componentDidMount () {
54 | loadCaptchaEnginge(6);
55 | };
56 | ```
57 | - **Step 4:**
58 |
59 | Validate captcha by using **validateCaptcha(user_captcha_value)**
60 |
61 |
62 | ```sh
63 | doSubmit = () => {
64 |
65 | let user_captcha_value = document.getElementById('user_captcha_input').value;
66 |
67 | if (validateCaptcha(user_captcha_value)==true) {
68 | alert('Captcha Matched');
69 | }
70 |
71 | else {
72 | alert('Captcha Does Not Match');
73 | }
74 | };
75 | ```
76 |
77 | **OR**
78 | If 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)**
79 |
80 |
81 | ```sh
82 | doSubmit = () => {
83 |
84 | let user_captcha_value = document.getElementById('user_captcha_input').value;
85 |
86 | if (validateCaptcha(user_captcha_value, false)==true) {
87 | alert('Captcha Matched');
88 | }
89 |
90 | else {
91 | alert('Captcha Does Not Match');
92 | }
93 | };
94 | ```
95 |
96 |
97 | ### Options
98 |
99 | Listed are all the options available for react-simple-captcha
100 |
101 | | Name | Description |
102 | | ------ | ------ |
103 | | **< LoadCanvasTemplate />** | It will load the captcha **with 'Reload Captcha'** functionality. Place between your render code, usage example **< LoadCanvasTemplate />** |
104 | | **< LoadCanvasTemplateNoReload />** | It will load the captcha **without 'Reload Captcha'** functionality. Place between your render code, usage example **< LoadCanvasTemplateNoReload />** |
105 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*);** | Simply paste it in **componentDidMount()**. Pass number of captcha characters you want to display. |
106 | | **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* |
107 | | **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* |
108 |
109 | ### Optional Changes
110 |
111 |
112 | | **Options** | **All of these changes are optionals** |
113 | | ------ | ------ |
114 | | **< LoadCanvasTemplate reloadText="Reload My Captcha" />** | If you want to change the **"Reload Captcha"** with your own text |
115 | | **< LoadCanvasTemplate reloadColor="red" />** | If you want to change the blue color of **"Reload Captcha"** |
116 | | **< LoadCanvasTemplate reloadText="Reload My Captcha" reloadColor="red" />** | If you want to change the **"Reload Captcha"** text and it's blue color |
117 | | **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');** |
118 | | **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');** |
119 | | **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');** |
120 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Upper_Characters_Only*);** | If you want only upper characters and numbers use **loadCaptchaEnginge(6,'','','upper');** |
121 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Lower_Characters_Only*);** | If you want only lower characters and numbers use **loadCaptchaEnginge(6,'','','lower');** |
122 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Numbers*);** | If you want only numbers use **loadCaptchaEnginge(6,'','','numbers');** |
123 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Special_Characters*);** | If you want only special characters use **loadCaptchaEnginge(6,'','','special_char');** |
124 |
125 | ### Example
126 | Let's create a class name **CaptchaTest** with react simple captcha functionality:
127 |
128 | ```sh
129 | import React, { Component } from 'react';
130 | import { loadCaptchaEnginge, LoadCanvasTemplate, LoadCanvasTemplateNoReload, validateCaptcha } from 'react-simple-captcha';
131 |
132 |
133 |
134 | class CaptchaTest extends Component {
135 |
136 | componentDidMount () {
137 | loadCaptchaEnginge(6);
138 | };
139 |
140 | doSubmit = () => {
141 | let user_captcha = document.getElementById('user_captcha_input').value;
142 |
143 | if (validateCaptcha(user_captcha)===true) {
144 | alert('Captcha Matched');
145 | loadCaptchaEnginge(6);
146 | document.getElementById('user_captcha_input').value = "";
147 | }
148 |
149 | else {
150 | alert('Captcha Does Not Match');
151 | document.getElementById('user_captcha_input').value = "";
152 | }
153 | };
154 |
155 | render() {
156 |
157 |
158 | return (
);
45 | };
46 | ```
47 |
48 | - **Step 3:**
49 |
50 | Paste **loadCaptchaEnginge(6)** *(You can change 6 to number of captcha charcters you want)* in **componentDidMount**
51 |
52 | ```sh
53 | componentDidMount () {
54 | loadCaptchaEnginge(6);
55 | };
56 | ```
57 | - **Step 4:**
58 |
59 | Validate captcha by using **validateCaptcha(user_captcha_value)**
60 |
61 |
62 | ```sh
63 | doSubmit = () => {
64 |
65 | let user_captcha_value = document.getElementById('user_captcha_input').value;
66 |
67 | if (validateCaptcha(user_captcha_value)==true) {
68 | alert('Captcha Matched');
69 | }
70 |
71 | else {
72 | alert('Captcha Does Not Match');
73 | }
74 | };
75 | ```
76 |
77 | **OR**
78 | If 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)**
79 |
80 |
81 | ```sh
82 | doSubmit = () => {
83 |
84 | let user_captcha_value = document.getElementById('user_captcha_input').value;
85 |
86 | if (validateCaptcha(user_captcha_value, false)==true) {
87 | alert('Captcha Matched');
88 | }
89 |
90 | else {
91 | alert('Captcha Does Not Match');
92 | }
93 | };
94 | ```
95 |
96 |
97 | ### Options
98 |
99 | Listed are all the options available for react-simple-captcha
100 |
101 | | Name | Description |
102 | | ------ | ------ |
103 | | **< LoadCanvasTemplate />** | It will load the captcha **with 'Reload Captcha'** functionality. Place between your render code, usage example **< LoadCanvasTemplate />** |
104 | | **< LoadCanvasTemplateNoReload />** | It will load the captcha **without 'Reload Captcha'** functionality. Place between your render code, usage example **< LoadCanvasTemplateNoReload />** |
105 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*);** | Simply paste it in **componentDidMount()**. Pass number of captcha characters you want to display. |
106 | | **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* |
107 | | **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* |
108 |
109 | ### Optional Changes
110 |
111 |
112 | | **Options** | **All of these changes are optionals** |
113 | | ------ | ------ |
114 | | **< LoadCanvasTemplate reloadText="Reload My Captcha" />** | If you want to change the **"Reload Captcha"** with your own text |
115 | | **< LoadCanvasTemplate reloadColor="red" />** | If you want to change the blue color of **"Reload Captcha"** |
116 | | **< LoadCanvasTemplate reloadText="Reload My Captcha" reloadColor="red" />** | If you want to change the **"Reload Captcha"** text and it's blue color |
117 | | **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');** |
118 | | **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');** |
119 | | **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');** |
120 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Upper_Characters_Only*);** | If you want only upper characters and numbers use **loadCaptchaEnginge(6,'','','upper');** |
121 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Lower_Characters_Only*);** | If you want only lower characters and numbers use **loadCaptchaEnginge(6,'','','lower');** |
122 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Numbers*);** | If you want only numbers use **loadCaptchaEnginge(6,'','','numbers');** |
123 | | **loadCaptchaEnginge(*Number_Of_Captcha_Charcters*, *Background_Color*, *Font_Color*, *Special_Characters*);** | If you want only special characters use **loadCaptchaEnginge(6,'','','special_char');** |
124 |
125 | ### Example
126 | Let's create a class name **CaptchaTest** with react simple captcha functionality:
127 |
128 | ```sh
129 | import React, { Component } from 'react';
130 | import { loadCaptchaEnginge, LoadCanvasTemplate, LoadCanvasTemplateNoReload, validateCaptcha } from 'react-simple-captcha';
131 |
132 |
133 |
134 | class CaptchaTest extends Component {
135 |
136 | componentDidMount () {
137 | loadCaptchaEnginge(6);
138 | };
139 |
140 | doSubmit = () => {
141 | let user_captcha = document.getElementById('user_captcha_input').value;
142 |
143 | if (validateCaptcha(user_captcha)===true) {
144 | alert('Captcha Matched');
145 | loadCaptchaEnginge(6);
146 | document.getElementById('user_captcha_input').value = "";
147 | }
148 |
149 | else {
150 | alert('Captcha Does Not Match');
151 | document.getElementById('user_captcha_input').value = "";
152 | }
153 | };
154 |
155 | render() {
156 |
157 |
158 | return (