Allow ReCaptchaV2 to change its size dynamically

[AnthonyLzq]

Currently, I can't resize the ReCaptchaV2 component dynamically. I'm detecting if the screen size is mobile using material, but even when I change the size it remains the initial size. I have the following code:

import { useMediaQuery } from '@mui/material'

const Component = () => {
  const isMobile = useMediaQuery(theme.breakpoints.down('md'))

  return (
    <ReCaptchaV2
      callback={v2Callback}
      theme={EReCaptchaV2Theme.Dark}
      size={isMobile ? EReCaptchaV2Size.Compact : EReCaptchaV2Size.Normal}
      style={{
        margin: '8px 0px'
      }}
    />
  )
}

If it is possible, I would like ReCaptchaV2 to be responsive. So I can change its size accordingly. Thanks in advance.

[AlexKarajohn]

Adding

key={isMobile}

will cause the size to change when that var changes.

[AnthonyLzq]

I will give it a try.

[antokara]

I will give it a try.

@AnthonyLzq please close the ticket if this is an acceptable solution. Thank you!

[AnthonyLzq]

Yes it works, there just a little extra step, you have to parse the key value to string to make it work in TS. Something like this:

import { useMediaQuery } from '@mui/material'

const Component = () => {
  const isMobile = useMediaQuery(theme.breakpoints.down('md'))

  return (
    <ReCaptchaV2
      callback={v2Callback}
      theme={EReCaptchaV2Theme.Dark}
      size={isMobile ? EReCaptchaV2Size.Compact : EReCaptchaV2Size.Normal}
      style={{
        margin: '8px 0px'
      }}
      key={`${isMobile}`}
    />
  )
}

Thank you for your help.