hd-react-time-picker

A customizable React TimePicker component with support for step intervals and mobile-friendly behavior.

Installation

Install the package via npm:

npm install hd-react-time-picker

Or with Yarn:

yarn add hd-react-time-picker

Usage

Here’s how to use the TimePicker component in your React project:

Tailwind CSS Setup

This component uses Tailwind CSS for styling. Ensure that Tailwind CSS is installed and configured in your project. Refer to the Tailwind CSS documentation for setup instructions.

Basic Example

import React, { useState } from "react";
import { TimePicker } from "hd-react-time-picker";

const App = () => {
  const [time, setTime] = useState("08:30");

  return (
    <div>
      <h1>Select a Time</h1>
      <TimePicker
        step={15} // Step in minutes
        value={time} // Current time value
        onChange={(newTime) => setTime(newTime)} // Callback when time changes
      />
      <p>Selected Time: {time}</p>
    </div>
  );
};

export default App;

Customizing the Component

You can customize the TimePicker using the following props:

• step: The step interval in minutes (default is 15).
• hours: An optional array of custom hour values (e.g., ["00", "06", "12", "18"]).
• minutes: An optional array of custom minute values (e.g., ["00", "30"]).
• containerClassName: Custom CSS classes for the container.
• hourClassName: Custom CSS classes for the hour dropdown.
• minuteClassName: Custom CSS classes for the minute dropdown.

Example with Custom Classes

import React, { useState } from "react";
import { TimePicker } from "hd-react-time-picker";

const App = () => {
  const [time, setTime] = useState("08:30");

  return (
    <div>
      <h1>Custom TimePicker</h1>
      <TimePicker
        step={10}
        value={time}
        onChange={(newTime) => setTime(newTime)}
        containerClassName="p-2 border border-gray-300 rounded-md"
        hourClassName="text-blue-500"
        minuteClassName="text-red-500"
      />
      <p>Selected Time: {time}</p>
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |---------------------|----------------------|---------|-----------------------------------------------------------------------------| | step | number | 15 | Step interval in minutes. | | value | string | "00:00" | The current time value in HH:mm format. | | onChange | (value: string) => void | - | Callback function triggered when the time changes. | | hours | string[] | ["00", "01", ..., "23"] | Optional custom array of hour values. | | minutes | string[] | Calculated based on step | Optional custom array of minute values. | | containerClassName| string | "" | Custom CSS classes for the container. | | hourClassName | string | "" | Custom CSS classes for the hour dropdown. | | minuteClassName | string | "" | Custom CSS classes for the minute dropdown. |

Features

• Customizable: Pass custom hours, minutes, and styles.
• Step Support: Easily configure step intervals for minutes.
• Mobile-Friendly: Works seamlessly on mobile devices.

License

This project is licensed under the MIT License.