Skip to content
timepicker-ui
React · Features

Mobile Mode

Optimized interface for mobile devices

Mobile View

Enable mobile-optimized UI with larger touch targets:

Mobile Mode

Better for touch interactions

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2

3function App() {
4  return (
5    <Timepicker
6      options={{
7        ui: { mobile: true }
8      }}
9    />
10  );
11}

With Switch Icon

Add switch icon for better hour/minute navigation:

index.tsxtsx
1<Timepicker
2  options={{
3    ui: {
4      mobile: true,
5      enableSwitchIcon: true
6    }
7  }}
8/>

Responsive Design

Automatically switch to mobile mode based on screen size:

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2import { useState, useEffect } from "react";
3

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

7  useEffect(() => {
8    const checkMobile = () => setIsMobile(window.innerWidth < 768);
9    checkMobile();
10    window.addEventListener("resize", checkMobile);
11    return () => window.removeEventListener("resize", checkMobile);
12  }, []);
13

14  return (
15    <Timepicker
16      options={{
17        ui: { mobile: isMobile }
18      }}
19    />
20  );
21}