Skip to content

Add useVisualViewportSize hook#16

Merged
gndelia merged 3 commits into
masterfrom
add-use-visual-viewport-size
May 15, 2026
Merged

Add useVisualViewportSize hook#16
gndelia merged 3 commits into
masterfrom
add-use-visual-viewport-size

Conversation

@gndelia
Copy link
Copy Markdown
Contributor

@gndelia gndelia commented May 14, 2026

Description

Adds a new useVisualViewportSize hook that returns the current VisualViewport height and top offset, useful for handling on-screen keyboards on mobile and pinch-zoom layout adjustments. Also adds the hook's README.md and registers it in the root README's Hooks Reference table.

Note: no version bump in this PR — a few more changes are coming and they will all be released together.

Screenshots

N/A — no UI artifacts; pure hook addition.

Related issue(s)

N/A

Checklist

  • Manual testing passed.
  • Automated tests added, or N/A.
  • Documentation updated, or N/A.
  • Environment variables set in CI, or N/A.

Copilot AI review requested due to automatic review settings May 14, 2026 20:03
@gndelia gndelia self-assigned this May 14, 2026
@gndelia gndelia enabled auto-merge May 14, 2026 20:04
@gndelia gndelia requested a review from gabmontes May 14, 2026 20:04
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a new useVisualViewportSize hook to expose window.visualViewport.height and window.visualViewport.offsetTop, along with per-hook documentation and an entry in the root Hooks Reference table.

Changes:

  • Added useVisualViewportSize hook implemented via useSyncExternalStore.
  • Added hook documentation (src/useVisualViewportSize/README.md) including usage example.
  • Registered the new hook in the root README.md Hooks Reference table.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
src/useVisualViewportSize/index.ts Implements the new hook using useSyncExternalStore and window.visualViewport.
src/useVisualViewportSize/README.md Documents the hook API, SSR/unavailable behavior, and provides an example.
README.md Adds useVisualViewportSize to the hooks reference list.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/useVisualViewportSize/index.ts
Comment thread src/useVisualViewportSize/index.ts Outdated
gabmontes
gabmontes previously approved these changes May 14, 2026
@gabmontes
Copy link
Copy Markdown
Contributor

@gndelia no version bump?

@gndelia
Copy link
Copy Markdown
Contributor Author

gndelia commented May 14, 2026

@gndelia no version bump?

@gabmontes

image

gndelia added a commit to vetro-protocol/vetro-monorepo that referenced this pull request May 14, 2026
The hook exposes offsetTop reactively but only subscribed to resize.
Per the VisualViewport spec, offsetTop changes fire the scroll event
(e.g., pinch-zoom panning after the keyboard is open), so resize-only
subscription returns stale offsetTop in those cases.

Mirror this in hemilabs/react-hooks#16 so the upstream stays the
source of truth.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@gabmontes
Copy link
Copy Markdown
Contributor

gabmontes commented May 14, 2026

@gndelia no version bump?

@gabmontes

@gndelia 🙈

@gndelia gndelia merged commit ee91fc6 into master May 15, 2026
13 checks passed
@gndelia gndelia deleted the add-use-visual-viewport-size branch May 15, 2026 08:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants