Lonare React Time Picker

A modern, lightweight React time picker component with a clean interface and Tailwind CSS styling.

Installation

Features

• 📅 Clean and intuitive interface
• 🎨 Styled with Tailwind CSS
• 📱 Responsive design
• 🔧 Highly customizable
• 🎯 Date range restrictions
• 🚀 Easy to implement
• ⚡ Lightweight

Preview

Installation

npm install lonare-react-time-picker

or with yarn:

yarn add lonare-react-time-picker

Prerequisites

This package requires the following peer dependencies:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0",
  "@heroicons/react": ">=2.0.0"
}

Make sure you have Tailwind CSS configured in your project.

Usage

import TimePicker from 'lonare-react-time-picker';

function App() {
  const handleTimeChange = (time) => {
    console.log('Selected time:', time);
  };
  return (
      <TimePicker
        onChange={handleTimeChange}
        value="10:00"
        disabled={false}
        placeholder="Select time"
      />
  );
}

Props

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | Current time value in "HH:mm" format | | onChange | function | required | Callback function that receives the selected time | | disabled | boolean | false | Disables the time picker when true | | className | string | '' | Additional CSS classes for the container | | placeholder | string | 'Select time' | Placeholder text shown when no time is selected | | format | string | '24h' | Time format ('12h' or '24h') |

I'll add a comprehensive examples section to the README. Here's the additional content to add under the basic Usage section:

Examples

Basic Usage

import TimePicker from 'lonare-react-time-picker';

function BasicExample() {
  const [time, setTime] = useState('10:00');
  
  return (
    <TimePicker
      value={time}
      onChange={setTime}
    />
  );
}

With Custom Placeholder

function PlaceholderExample() {
  const [time, setTime] = useState('');
  
  return (
    <TimePicker
      value={time}
      onChange={setTime}
      placeholder="Pick meeting time"
    />
  );
}

Disabled State

function DisabledExample() {
  return (
    <TimePicker
      value="09:30"
      onChange={() => {}}
      disabled={true}
    />
  );
}

With Custom Styling

function StyledExample() {
  const [time, setTime] = useState('14:00');
  
  return (
    <TimePicker
      value={time}
      onChange={setTime}
      className="custom-time-picker"
    />
  );
}

Form Integration

function FormExample() {
  const [formData, setFormData] = useState({
    meetingTime: '',
    title: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.title}
        onChange={(e) => setFormData({...formData, title: e.target.value})}
        placeholder="Meeting Title"
      />
      <TimePicker
        value={formData.meetingTime}
        onChange={(time) => setFormData({...formData, meetingTime: time})}
        placeholder="Select Meeting Time"
      />
      <button type="submit">Schedule Meeting</button>
    </form>
  );
}

With Error Handling

function ErrorHandlingExample() {
  const [time, setTime] = useState('');
  const [error, setError] = useState('');

  const handleTimeChange = (newTime) => {
    // Example validation: Don't allow times before 9 AM
    const hour = parseInt(newTime.split(':')[0]);
    if (hour < 9) {
      setError('Please select a time after 9:00 AM');
      return;
    }
    setError('');
    setTime(newTime);
  };

  return (
    <div>
      <TimePicker
        value={time}
        onChange={handleTimeChange}
        className={error ? 'error' : ''}
      />
      {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
    </div>
  );
}

With Custom Format

function CustomFormatExample() {
  const [time, setTime] = useState('13:00');
  
  return (
    <TimePicker
      value={time}
      onChange={setTime}
      format="12h" // Use 12-hour format
    />
  );
}