Fix/use avoid keyboard #304
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* feat: mobile scaffolding * fix: root setting * chore: pnp 제거 * chore: git ignore * Revert "chore: pnp 제거" This reverts commit 05136ba. * chore: update react peer dependency to allow any version from 18.0.0 * chore: remove baseUrl from tsconfig.json * chore: add mobile package to PnP configuration and update yarn settings * chore: update Node.js version in .nvmrc to v22.18.0
Add SSR environment detection utility. - isServer(): Check if code is running on the server - Includes client and SSR environment tests
* feat(mobile): add isServer utility Add SSR environment detection utility. - isServer(): Check if code is running on the server - Includes client and SSR environment tests * feat(mobile): add bodyScrollLock utility and useBodyScrollLock hook Add body scroll lock functionality for modals and overlays. Utils: - enableBodyScrollLock(): Lock body scroll with position preservation - disableBodyScrollLock(): Unlock and restore scroll position Hook: - useBodyScrollLock(): Auto lock on mount, unlock on unmount Includes comprehensive tests with edge cases and SSR tests.
feat: implement function for detecting device
feat: implement getKeyboard function
* feat(mobile): add isServer utility Add SSR environment detection utility. - isServer(): Check if code is running on the server - Includes client and SSR environment tests * feat(mobile): add useVisualViewport hook Add hook to track Visual Viewport changes in mobile WebView. Returns: - width, height: Viewport dimensions - offsetLeft, offsetTop: Viewport offset from layout viewport - scale: Pinch-zoom scaling factor Use cases: - Detect keyboard appearance (iOS: negative offsetTop) - Handle pinch-zoom interactions - Responsive layout adjustments Includes comprehensive tests with edge cases and SSR tests. * feat(mobile): enhance useVisualViewport hook to handle null viewport - Updated the useVisualViewport hook to return an object containing the viewport state or null if not supported. - Modified example usage to check for null before accessing viewport properties. - Improved getVisualViewportState function to return null when visualViewport is not available, ensuring safer access to viewport properties. * feat: test * fix(mobile): improve null handling in useVisualViewport hook - Updated useVisualViewport to ensure it returns null when visualViewport is not available, enhancing safety. - Refactored getVisualViewportState to always expect a valid visualViewport, removing unnecessary null checks. - Improved state management for viewport updates to handle null cases more gracefully.
* feat(examples): add example applications with root tsconfig settings Add two example projects to demonstrate @react-simplikit/mobile usage: - with-vite: Vite + React CSR example - with-nextjs: Next.js App Router SSR example Both examples use the same tsconfig settings as the root project. * chore(examples): customize tsconfig for each example - with-vite: add isolatedModules for HMR support - with-nextjs: add Next.js specific settings - jsx: preserve (required for Next.js) - incremental, isolatedModules - Next.js plugin - include next-env.d.ts and .next/types * refactor(examples): use named import for ReactNode instead of React.* * chore(examples): update vite to v7 * chore(examples): apply Next.js required tsconfig settings * refactor(examples): remove DEMOS constant, define demos inline * chore: lint
* feat(mobile): add isServer utility Add SSR environment detection utility. - isServer(): Check if code is running on the server - Includes client and SSR environment tests * feat(mobile): add useScrollDirection hook Add hook to detect scroll direction with throttling support. Returns: - direction: 'up' | 'down' | null - position: Current scroll Y position Options: - throttleMs: Throttle interval (default: 50ms) Use cases: - Hide/show header on scroll - Infinite scroll implementations - Scroll-based animations Includes comprehensive tests with edge cases and SSR tests.
feat: implement subscribeKeyboardHeight and useKeyboardHeight function
feat(mobile): implement useAvoidKeyboard function
feat(mobile): implement isKeyboardVisible function
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
Summary
Changes useKeyboardHeight to return an object { keyboardHeight: number } instead of a plain number for consistency and extensibility. Updates useAvoidKeyboard and its tests accordingly.
Changes
Breaking Change
useKeyboardHeight() return type: number → { keyboardHeight: number }
Updated Files
useKeyboardHeight.ts: Returns { keyboardHeight } object
useAvoidKeyboard.ts: Destructures keyboardHeight from the returned object
useAvoidKeyboard.test.ts: Updates mocks to return object format
Checklist
yarn run fixto format and lint the code and docs?yarn run test:coverageto make sure there is no uncovered line?