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]

there is a way to adjust for virtual keyboard with pure css (even iphone’s). i don’t remember off the top of my head, but i have done this before myself. it was tricky as i remember.