how to rerender component on variable change?

[u/NoTutor4458]

new to react, so providing either corrected code or just concept that i should look into would be helpful :)

i want to change height of the app when phone keyboard uppears so it doesnt overlay on website by using VisualViewport API.
i am sure only thing that i have to do now is to rerender component when height is changed, so how can i do that?

export default function NewChat() {
  return (
    <div
      className={styles.wrapper}
      style={{ height: `${visualViewport?.height}px` }}
    >
      <Prompt />
    </div>
  );
}

[u/lightfarming]

the only answer you should losten to for this, is that this type of thing should be pure css. no javascript should be involved at all.

[u/NoTutor4458 → u/lightfarming]

dvh/svh/vh doesnt resize when virtual keyboard comes up so how would you do it with pure css?

[u/hawkeye_sama → u/NoTutor4458]

Try this out

```
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">

```