@waqarfazal/ios-time-picker-react

A beautiful iOS-style time picker component for React with smooth animations and physics-based scrolling.

Features

• 🎨 iOS-style design with smooth animations
• ⚡ Physics-based scrolling with momentum
• 🎯 Snap-to-nearest selection
• 📱 Touch and mouse support
• 🎮 Wheel/mouse wheel support
• 📦 TypeScript support
• 🎨 Customizable styling
• 🔧 Easy to integrate

Installation

npm install @waqarfazal/ios-time-picker-react

or

yarn add @waqarfazal/ios-time-picker-react

Usage

import React, { useState } from 'react';
import TimePicker from '@waqarfazal/ios-time-picker-react';

function App() {
  const [time, setTime] = useState({ hours: 9, minutes: 30, period: 'AM' });

  const handleTimeChange = (newTime) => {
    setTime(newTime);
    console.log('Time changed:', newTime);
  };

  return (
    <div>
      <h2>Selected Time: {time.hours}:{time.minutes.toString().padStart(2, '0')} {time.period}</h2>
      <TimePicker 
        initialTime={time}
        onTimeChange={handleTimeChange}
      />
    </div>
  );
}

Props

TimePickerProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialTime | { hours: number; minutes: number; period: string } | { hours: 9, minutes: 30, period: 'AM' } | Initial time to display | | onTimeChange | (time: { hours: number; minutes: number; period: string }) => void | undefined | Callback function called when time changes |

Time Object Structure

interface Time {
  hours: number;    // 1-12
  minutes: number;  // 0-59
  period: string;   // 'AM' | 'PM'
}

Styling

The component comes with built-in iOS-style styling. The time picker uses a dark theme by default with white text and subtle gradients.

Custom Styling

You can customize the appearance by overriding the CSS classes:

.time-picker-container {
  /* Container styles */
}

.time-picker {
  /* Main picker container */
}

.time-picker-column {
  /* Individual column (hours, minutes, period) */
}

.time-picker-item {
  /* Individual time items */
}

.time-picker-item.selected {
  /* Selected item styling */
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

# Install dependencies
npm install

# Build the package
npm run build

# Publish to npm
npm publish

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.