{"library":"react-time-picker","title":"React Time Picker","description":"`react-time-picker` is a React component that provides an intuitive interface for users to select a specific time. It is actively maintained, with the current stable version being 8.0.3, released recently with improvements like OIDC trusted publishing and immutable releases. The library generally follows a stable release cadence, with major versions addressing significant breaking changes or new React features, and minor/patch versions focusing on bug fixes and enhancements. Key differentiators include its focus on accessibility, ease of integration into existing React projects, and reliance on native browser datetime capabilities where appropriate, while offering extensive customization for internationalization and display formats. It provides a clean, unopinionated UI that integrates well into various design systems, offering flexibility without enforcing a specific look and feel, and ships with TypeScript types for improved developer experience.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-time-picker"],"cli":null},"imports":["import TimePicker from 'react-time-picker';","import 'react-time-picker/dist/TimePicker.css';","import 'react-clock/dist/Clock.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport TimePicker from 'react-time-picker';\nimport 'react-time-picker/dist/TimePicker.css';\nimport 'react-clock/dist/Clock.css'; // Often needed for the clock overlay\n\ntype ValuePiece = Date | null;\ntype Value = ValuePiece | [ValuePiece, ValuePiece];\n\nfunction MyTimePicker() {\n  const [value, onChange] = useState<Value>(new Date());\n\n  return (\n    <div>\n      <h1>Select a Time</h1>\n      <TimePicker\n        onChange={onChange}\n        value={value}\n        format=\"HH:mm\" // Example format\n        clearIcon={null} // Remove clear button if desired\n        disableClock={true} // Disable the clock popover if only input is wanted\n      />\n      {value && <p>Selected time: {Array.isArray(value) ? value[0]?.toLocaleTimeString() : value.toLocaleTimeString()}</p>}\n    </div>\n  );\n}\n\nexport default MyTimePicker;","lang":"typescript","description":"Demonstrates basic usage of `TimePicker` component, including state management for the selected time, configuring display format, and importing necessary CSS for styling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}