React Time Picker Roll

A beautiful, smooth, and interactive time picker component for React applications with iOS-style rolling animation.

Default usage (without input field):

With input field (asInput):

✨ Features

• 🎨 Beautiful UI: Modern glassmorphism design with smooth animations
• 🎯 Interactive: Drag to scroll, mouse wheel support, and touch-friendly
• ⚡ Smooth Animations: Powered by Framer Motion for fluid interactions
• 📱 Responsive: Works perfectly on desktop and mobile devices
• 🎪 Customizable: Easy to style and integrate into any design
• 🔧 TypeScript: Full TypeScript support with proper type definitions
• 🚀 Lightweight: Minimal bundle size with no heavy dependencies

Want to try or download the full purple-style demo project? 👉 View or Download the Demo Project on GitHub

📦 Installation

npm install react-time-picker-roll

🚀 Quick Start

import React, { useState } from 'react';
import { TimePickerComponent } from 'react-time-picker-roll';

const App = () => {
  const [time, setTime] = useState({ hours: 6, minutes: 0, period: 'AM' });

  return (
    <div>
      {/* Default usage */}
      <TimePickerComponent initialTime={time} onChange={setTime} />

      {/* Glassmorphism style */}
      <TimePickerComponent
        initialTime={time}
        onChange={setTime}
        variant='glass'
      />

      {/* Professional style */}
      <TimePickerComponent
        initialTime={time}
        onChange={setTime}
        variant='professional'
      />

      {/* Input field (modal picker) */}
      <TimePickerComponent initialTime={time} onChange={setTime} asInput />
    </div>
  );
};

You can use the picker directly or as an input field (modal). See the GIFs above for both options.

📖 API Reference

Props

| Prop | Type | Default | Description | | ------------- | -------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------- | | initialTime | { hours: number; minutes: number; period: string } | { hours: 6, minutes: 0, period: 'AM' } | Initial time value | | onChange | (time: { hours: number; minutes: number; period: string }) => void | - | Callback function when time changes | | natural | boolean | false | If true, removes background, shadow, and padding for a plain look | | variant | 'default' \| 'professional' \| 'glass' | 'default' | 'glass' for glassmorphism style, 'professional' for modern look | | asInput | boolean | false | If true, shows an input field and opens the picker in a modal |

Time Object Structure

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

🎨 Customization

The component uses CSS modules for styling, but also provides global class names for easy targeting:

• .rtp-time-picker (main container)
• .rtp-time-picker-column (each column)
• .rtp-time-item (each time value)

You can customize the appearance by overriding these classes in your own CSS:

.rtp-time-picker {
  /* Custom styles for the main container */
}

.rtp-time-picker-column {
  /* Custom styles for columns */
}

.rtp-time-item.selected {
  /* Custom styles for selected item */
}

🛠️ Development

# Install dependencies
npm install

# Start development server
npm start

# Build the library
npm run build

# Run tests
npm test

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

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

📞 Support

If you have any questions or need help, please open an issue on GitHub.