mobile

@react-simplikit/mobile

English | 한국어

Mobile web utilities for React - fixing viewport, keyboard, and layout issues on iOS Safari and Android Chrome.

Why?

Mobile web development is hard. iOS Safari and Android Chrome have quirks that cause:

• Viewport height changes when keyboard opens
• Body scroll issues with modals
• Safe area inset handling
• Visual viewport inconsistencies

@react-simplikit/mobile provides battle-tested solutions for these common problems.

Features

• Keyboard handling - Avoid content being hidden by virtual keyboard
• Body scroll lock - Prevent background scroll in modals
• Visual viewport - Track actual visible area
• Safe area - Handle notch and home indicator
• Device detection - Detect iOS, Android, and browser types
• SSR-safe - Works with Next.js and other SSR frameworks

Installation

npm install @react-simplikit/mobile
# or
yarn add @react-simplikit/mobile
# or
pnpm add @react-simplikit/mobile

Quick Start

Keyboard Avoiding View

import { useAvoidKeyboard } from '@react-simplikit/mobile';

function ChatInput() {
  const { ref, style } = useAvoidKeyboard();

  return (
    <div ref={ref} style={style}>
      <input type="text" placeholder="Type a message..." />
    </div>
  );
}

Body Scroll Lock

import { useBodyScrollLock } from '@react-simplikit/mobile';

function Modal({ isOpen, children }) {
  useBodyScrollLock(isOpen);

  if (!isOpen) return null;
  return <div className="modal">{children}</div>;
}

Visual Viewport

import { useVisualViewport } from '@react-simplikit/mobile';

function Component() {
  const viewport = useVisualViewport();

  return (
    <div style={{ height: viewport.height }}>
      Actual visible height: {viewport.height}px
    </div>
  );
}

What's Included

Hooks

Hook	Description
useAvoidKeyboard	Avoid content being hidden by keyboard
useBodyScrollLock	Lock body scroll (for modals)
useVisualViewport	Track visual viewport size
useScrollDirection	Detect scroll direction
useNetworkStatus	Monitor network connectivity
usePageVisibility	Track page visibility state

Utilities

Utility	Description
bodyScrollLock	Imperative scroll lock control
getSafeArea	Get safe area insets
getKeyboardHeight	Estimate keyboard height
isIOS / isAndroid	Device detection
isServer	SSR environment check

Browser Support

• iOS Safari 13+
• Android Chrome 80+
• Desktop browsers (graceful fallback)

Related Packages

• react-simplikit - Core hooks & utilities

Contributing

We welcome contributions! Please see our Contributing Guide.

License

MIT © Viva Republica, Inc. See LICENSE for details.