Changing theme programmatically

As stated above is it possible to change the dark / light theme on function call or similiar. Looking to implement new prefers-color-scheme media query.

react-google-recaptcha version: 2.0.0-rc.1

[dozoisch]

In this case you could simply do this:

import React, { Component } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

export default class Captcha extends Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: null,
    };
  }

  componentDidMount() {
    const darkmode = document.querySelector('html').classList.contains('dark');
    if (darkmode) {
      this.setState({ theme: 'dark' });
    } else {
      this.setState({ theme: 'light' });
    }
  }

  render() {
    if (!this.state.theme) { return null; }
    return <ReCAPTCHA theme={this.state.theme} />;
  }
}

[b-bot]

Awesome thanks for the help man, went with a different solution as that still had a delayed rendering. Ended up rendering both and hiding / displaying depending on body class. The swop-out is instant now.