Usage

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

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:

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:

  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:

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