# useVisualViewport

The visual viewport: the part of the page actually visible, which shrinks when the on-screen keyboard opens on phones and moves with pinch zoom.

`bottomInset` is how many pixels at the bottom of the layout viewport are covered, so a fixed bottom bar can move above the keyboard. Renders `serverValue` on the server and during hydration. Falls back to the window size where `visualViewport` is missing.

## Import

```ts
import { useVisualViewport } from '@vincent.ri/react-tils'
// or only this hook
import { useVisualViewport } from '@vincent.ri/react-tils/useVisualViewport'
```

## Usage

```ts
const { bottomInset } = useVisualViewport()
return <form style={{ position: 'fixed', left: 0, right: 0, bottom: bottomInset }}><ChatInput /></form>
```

## When to use it

Keeping a chat input, bottom toolbar, or "Save" bar visible above the mobile keyboard, or positioning UI correctly while pinch-zoomed.

## When not to

You just need the window size; use `useWindowSize`. Where supported, CSS can handle the keyboard: the `interactive-widget=resizes-content` viewport meta setting, or `env(keyboard-inset-height)` with the VirtualKeyboard API.

## API

```ts
function useVisualViewport(serverValue?: VisualViewportState): VisualViewportState
```

| Parameter | Description |
| --- | --- |
| `serverValue` | Value on the server and during hydration. Default all zeros, scale `1`. |

### Types

```ts
export type VisualViewportState = {
  /** Visible width in CSS pixels. */
  width: number;
  /** Visible height in CSS pixels; shrinks when the on-screen keyboard opens. */
  height: number;
  offsetTop: number;
  offsetLeft: number;
  /** Pinch-zoom scale. */
  scale: number;
  /** How much of the layout viewport's bottom is hidden, usually by the on-screen keyboard. */
  bottomInset: number;
};
```

## Browser support

Works in all modern browsers.

---

285 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/useVisualViewport.ts
Docs page: https://vincentri.github.io/react-tils/hooks/useVisualViewport/
Previous: [useWindowSize](https://vincentri.github.io/react-tils/hooks/useWindowSize.md)
Next: [useWindowScroll](https://vincentri.github.io/react-tils/hooks/useWindowScroll.md)