Mobile Mode

Optimized interface for mobile devices

Mobile View

Enable mobile-optimized UI with larger touch targets:

Mobile Mode

Better for touch interactions

import { Timepicker } from "timepicker-ui-react";

function App() {
  return (
    <Timepicker
      options={{
        ui: { mobile: true }
      }}
    />
  );
}

With Switch Icon

Add switch icon for better hour/minute navigation:

<Timepicker
  options={{
    ui: {
      mobile: true,
      enableSwitchIcon: true
    }
  }}
/>

Responsive Design

Automatically switch to mobile mode based on screen size:

import { Timepicker } from "timepicker-ui-react";
import { useState, useEffect } from "react";

function ResponsiveTimepicker() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener("resize", checkMobile);
    return () => window.removeEventListener("resize", checkMobile);
  }, []);

  return (
    <Timepicker
      options={{
        ui: { mobile: isMobile }
      }}
    />
  );
}