open-index/open-npm huggingface dataset:
npm package: @somm12/time-wheel
Description: A React component for selecting time with a smooth scroll wheel, inspired by iPhone's time picker.
Latest version: 0.0.16

## Usage

Use the TimeWheel component to create a time selection UI and retrieve the selected time via ref.

```jsx
import { useRef } from "react";
import TimeWheel, { TimeWheelHandle } from "@somm12/time-wheel";

export default function App() {
  const timeWheelRef = useRef<TimeWheelHandle>(null);

  const handleClick = () => {
    if (timeWheelRef.current) {
      const selectedTime = timeWheelRef.current.getSelectedTime();
      console.log(`${selectedTime.amPm} ${selectedTime.hour}:${selectedTime.minute}`);
      *// e.g., "오전 08:00" (Korean "AM 08:00")*
    }
  };
  const initTime = { initHour: 8, initMinute: 0 }; *// Initial time (24-hour format)*
  return (
    <>
      <TimeWheel ref={timeWheelRef} initTime={initTime} />
      <button onClick={handleClick}>Select</button>
    </>
  );
}
```

- **Features**: Supports Korean "오전/오후" (AM/PM) notation, with 12-hour format and 00/30 minute intervals.

## Demo
Here's a short demo of TimeWheel in action:

![2025-03-0412 13 46-ezgif com-optimize](https://github.com/user-attachments/assets/457f50d8-250f-4641-a40f-9f46bfe91be6)


## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| initTime | { initHour, initMinute } | { 8, 0 } | Initial time (24-hour format, optional) |
| onTimeChange | (amPm, hour, minute) => void | - | Callback on time change (optional) |
|  |  |  |  |
- initHour: 0~23 (24-hour format).
- initMinute: 0 or 30.

## Methods (via ref)

| Method | Return Type | Description |
| --- | --- | --- |
| getSelectedTime() | { amPm: string, hour: string, minute: string } | Returns current selected time |
| resetScrollPosition(newAmPm, newHour, newMinute) | void | Resets scroll to specific time |
- newAmPm: 0 ("오전"/AM), 1 ("오후"/PM).
- newHour: 1~12.
- newMinute: 0 or 30.

## Notes

- This package depends on styled-components, so install it in your project:
    
    
    ```jsx
    npm install styled-components
    ```
    
- Uses Korean "오전/오후" (AM/PM) notation by default and operates on a 12-hour system.

🌟 Important: For proper styling, ensure your project includes the following base CSS:

```css
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
```