{"id":11884,"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.","status":"active","version":"8.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/wojtekmaj/react-time-picker","tags":["javascript","react","time","time-picker","typescript"],"install":[{"cmd":"npm install react-time-picker","lang":"bash","label":"npm"},{"cmd":"yarn add react-time-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-time-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required React host component for rendering UI.","package":"react","optional":false},{"reason":"Required for mounting and rendering React components.","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React. Used for type checking and IntelliSense.","package":"@types/react","optional":true}],"imports":[{"note":"The package became ESM-only in v8.0.0. CommonJS require() is no longer supported for direct imports.","wrong":"const TimePicker = require('react-time-picker');","symbol":"TimePicker","correct":"import TimePicker from 'react-time-picker';"},{"note":"Essential for proper styling and visual presentation of the component.","symbol":"TimePicker CSS","correct":"import 'react-time-picker/dist/TimePicker.css';"},{"note":"If using the default clock popover, its styles (from `react-clock`) must also be imported separately.","symbol":"Clock CSS (often needed)","correct":"import 'react-clock/dist/Clock.css';"}],"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."},"warnings":[{"fix":"Ensure your project, bundler (e.g., Webpack, Rollup), and test runner (e.g., Jest) are configured to handle ES Modules. For Jest, consider migrating to Vitest or configuring Jest's experimental ESM support.","message":"The package dropped CommonJS build, becoming ESM-only. Direct `require()` statements will fail, and bundlers/test runners may require configuration adjustments.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Update your Babel configuration to use the new JSX transform. Follow the official React documentation on 'Introducing the New JSX Transform' for detailed instructions.","message":"The New JSX Transform is now a hard requirement. Older Babel configurations or React versions not using this transform will encounter build errors.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Migrate your component type checking to TypeScript or an alternative runtime type validation library.","message":"`propTypes` were removed from the component. Applications relying on `propTypes` for type checking will no longer receive warnings.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Configure Jest to transpile ES Modules, use `jest-esm-transformer`, or consider migrating your testing setup to an ESM-first runner like Vitest.","message":"Running unit tests with Jest might fail due to the package being ESM-only since v8.0.0, as Jest's default environment is CommonJS.","severity":"gotcha","affected_versions":">=8.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update `react-time-picker` to version 8.0.3 or newer, as this bug was fixed in that release.","cause":"An internal issue with date formatting logic, particularly in certain browser environments.","error":"TypeError: get format called on incompatible undefined"},{"fix":"Configure Jest to process ES modules (e.g., via `babel-jest` with appropriate presets and plugins, or `jest-esm-transformer`), or migrate your test suite to a test runner like Vitest which natively supports ESM.","cause":"Occurs when running Jest tests because `react-time-picker` is an ESM-only package (since v8.0.0), and Jest typically runs in a CommonJS environment by default.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Update `react-time-picker` to version 6.5.0 or newer, where this SSR compatibility issue was resolved.","cause":"This error occurs during Server-Side Rendering (SSR) when the component attempts to access browser-specific global objects that are not available in a Node.js environment.","error":"ReferenceError: HTMLElement is not defined"},{"fix":"Update `react-time-picker` to version 6.5.1 or newer, which contains a fix for this SSR-related prop type validation issue.","cause":"An error in prop type validation specifically affecting Server-Side Rendering (SSR) environments when the `portalContainer` prop was used.","error":"Failed prop type: TimePicker: prop type portalContainer is invalid"}],"ecosystem":"npm"}