stekolschikovv / react-captcha-generator

react captcha generator

Component for captcha generation.

Using

Import to file

import RCG from 'react-captcha-generator';
...

Add to сode

...
  <RCG
    result={this.result} // Callback function with code
  />
...
  result(text){
    console.log('code --->',text)
  }
...

Example:

import React, { Component } from 'react';
import './App.css';
import RCG from 'react-captcha-generator';

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      captcha: ''
    }
    this.check = this.check.bind(this)
    this.result = this.result.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.handleClick}>
          <input type='text' className={'xxx'} ref={ref => this.captchaEnter = ref} />
          <input type='submit' />
        </form>
        <RCG result={this.result} />
      </div>
    );
  }

  handleClick(e) {
    e.preventDefault();
    this.check()
  }

  result(text) {
    this.setState({
      captcha: text
    })
  }
  
  check() {
    console.log(this.state.captcha, this.captchaEnter.value, this.state.captcha === this.captchaEnter.value)
  }

}

export default App;

react-captcha-generator's Issues

setState refresh captcha.

Hey, nice work here. Small issue in your implementation, when you call setState, the whole component is reloaded, therefore eachtime an user input data in the captcha field it will refresh itself. The solution would be to not use setState and simply append a field to this thus preventing that infinite loop.