search

appleboy / react-recaptcha

A react.js reCAPTCHA for Google
https://www.google.com/recaptcha/intro/index.html
BSD 3-Clause "New" or "Revised" License
635 stars 97 forks source link

Passing style prop #197

Open mhemrg opened 7 years ago

mhemrg commented 7 years ago

Can I pass style prop to <Recaptcha />? I want to give it margin: auto.

aqibos commented 7 years ago

If it helps, I wrapped it in a <div></div> block and styled the div block.

But, I also would like to know if it can be styled in any way.

Thanks.

glorp47 commented 6 years ago

+1 ... the fact that the styling is inline hardcoded would be fine if there was some way to change the default style...

stiofand commented 6 years ago

At present for some nonsensical reason, with all their hullabaloo about material-ui and responsive design, the recaptcha is entirely un responsive, since its called in an iFrame, there is no way to style the final element. I so badly need to adjust the width for smaller screen sizes, but styling an outer custom element does not trickle through an iFrame, so its a serious flaw on Googles side.

selrond commented 6 years ago

@stevematdavies @ashah023 @glorp47 this helps, if you're dealing with small screens: ReCaptcha API v2 Styling - Stack Overflow

enriqueesmith commented 5 years ago

I was able to adjust the size of the Recaptcha by passing an elementId prop in the Recaptcha component and then calling the id in the css file:

In JSX file:

... <Recaptcha elementID="tablet" sitekey="6Le_my_site_key" render="explicit" /> ...

In CSS file:

#tablet {
    transform:scale(0.70);
    -webkit-transform:scale(0.70);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
}

Just change the scale numbers accordingly and it should make the Recaptcha box smaller or larger depending on what you want.