{"id":44097962,"url":"https://github.com/pglejzer/timepicker-ui-react","last_synced_at":"2026-04-02T17:58:23.118Z","repository":{"id":325793170,"uuid":"1101479046","full_name":"pglejzer/timepicker-ui-react","owner":"pglejzer","description":"React wrapper for timepicker-ui v4.x - typed, SSR-safe, lightweight.","archived":false,"fork":false,"pushed_at":"2026-03-29T10:25:33.000Z","size":72,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-29T13:44:14.630Z","etag":null,"topics":["material-design","material-design-3","picker","react","time","timepicker","timepicker-ui","typescript"],"latest_commit_sha":null,"homepage":"https://timepicker-ui.vercel.app/react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pglejzer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-21T18:24:41.000Z","updated_at":"2026-03-29T12:09:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/pglejzer/timepicker-ui-react","commit_stats":null,"previous_names":["pglejzer/timepicker-ui-react"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/pglejzer/timepicker-ui-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglejzer%2Ftimepicker-ui-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglejzer%2Ftimepicker-ui-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglejzer%2Ftimepicker-ui-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglejzer%2Ftimepicker-ui-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pglejzer","download_url":"https://codeload.github.com/pglejzer/timepicker-ui-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglejzer%2Ftimepicker-ui-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31312744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-design","material-design-3","picker","react","time","timepicker","timepicker-ui","typescript"],"created_at":"2026-02-08T13:14:10.764Z","updated_at":"2026-04-02T17:58:23.110Z","avatar_url":"https://github.com/pglejzer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# timepicker-ui-react\n\nOfficial React wrapper for [timepicker-ui](https://github.com/pglejzer/timepicker-ui) v4.x - clock \u0026 wheel time picker, full TypeScript, SSR-safe.\n\n[![npm version](https://badge.fury.io/js/timepicker-ui-react.svg)](https://badge.fury.io/js/timepicker-ui-react)\n[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://img.shields.io/npm/l/timepicker-ui-react)\n[![downloads](https://img.shields.io/npm/dm/timepicker-ui-react)](https://npmcharts.com/compare/timepicker-ui-react?minimal=true)\n\n[Live Demo](https://timepicker-ui.vercel.app/react) • [Documentation](https://timepicker-ui.vercel.app/react) • [Changelog](./CHANGELOG.md) • [Core Library](https://github.com/pglejzer/timepicker-ui)\n\n## Why timepicker-ui-react?\n\n- **Thin wrapper** - all power comes from the battle-tested timepicker-ui core\n- **Zero type duplication** - types re-exported directly from `timepicker-ui`\n- **SSR-safe** - works in Next.js, Remix, Astro out of the box\n- **Controlled \u0026 uncontrolled** - both `value` and `defaultValue` patterns\n- **All input props** - extends `InputHTMLAttributes`, pass anything directly\n- **Plugin support** - Timezone, Range, Wheel via `PluginRegistry`\n\n## Installation\n\n```bash\nnpm install timepicker-ui-react\n```\n\n\u003e `timepicker-ui` is included as a dependency - no need to install it separately.\n\n## Quick Start\n\n```tsx\nimport { Timepicker } from \"timepicker-ui-react\";\nimport \"timepicker-ui/main.css\";\n\nfunction App() {\n  return (\n    \u003cTimepicker\n      placeholder=\"Select time\"\n      onConfirm={(data) =\u003e console.log(\"Selected:\", data)}\n    /\u003e\n  );\n}\n```\n\n## API\n\nFull reference: [Props](https://timepicker-ui.vercel.app/react) · [Options](https://timepicker-ui.vercel.app/docs/api/options) · [Events](https://timepicker-ui.vercel.app/docs/api/events) · [TypeScript](https://timepicker-ui.vercel.app/docs/api/typescript)\n\n```tsx\n\u003cTimepicker\n  // Configuration\n  options={options} // TimepickerOptions\n  value={time} // controlled\n  defaultValue=\"12:00 AM\" // uncontrolled\n  // Callbacks\n  onConfirm={(data) =\u003e {}}\n  onCancel={(data) =\u003e {}}\n  onOpen={(data) =\u003e {}}\n  onUpdate={(data) =\u003e {}}\n  onSelectHour={(data) =\u003e {}}\n  onSelectMinute={(data) =\u003e {}}\n  onSelectAM={() =\u003e {}}\n  onSelectPM={() =\u003e {}}\n  onClear={(data) =\u003e {}}\n  onError={(data) =\u003e {}}\n  // Plugin callbacks\n  onTimezoneChange={(data) =\u003e {}}\n  onRangeConfirm={(data) =\u003e {}}\n  onRangeSwitch={(data) =\u003e {}}\n  onRangeValidation={(data) =\u003e {}}\n  // Any standard \u003cinput\u003e prop\n  className=\"my-input\"\n  placeholder=\"Select time\"\n  disabled={false}\n  id=\"timepicker-1\"\n/\u003e\n```\n\n## Options Overview\n\nSame options as timepicker-ui core. Full reference: [Options docs](https://timepicker-ui.vercel.app/docs/api/options) · [Configuration guide](https://timepicker-ui.vercel.app/docs/configuration)\n\n```tsx\n\u003cTimepicker\n  options={{\n    clock: { type: \"24h\", autoSwitchToMinutes: true },\n    ui: { theme: \"m3-green\", mode: \"clock\", clearButton: true },\n    labels: { ok: \"Confirm\", cancel: \"Close\" },\n    behavior: { focusTrap: true },\n    wheel: { placement: \"auto\", commitOnScroll: false },\n  }}\n/\u003e\n```\n\n## Themes\n\nSame 10 themes as core. [Browse all](https://timepicker-ui.vercel.app/docs/features/themes) · [Live examples](https://timepicker-ui.vercel.app/examples/themes/basic)\n\nAvailable: `basic`, `crane`, `crane-straight`, `m3-green`, `m2`, `dark`, `glassmorphic`, `pastel`, `ai`, `cyberpunk`\n\n```tsx\nimport \"timepicker-ui/main.css\";\nimport \"timepicker-ui/theme-dark.css\";\n\n\u003cTimepicker options={{ ui: { theme: \"dark\" } }} /\u003e;\n```\n\n## Plugins\n\nDocs: [Plugins overview](https://timepicker-ui.vercel.app/docs/features/plugins) · Examples: [Range](https://timepicker-ui.vercel.app/examples/plugins/range) · [Timezone](https://timepicker-ui.vercel.app/examples/plugins/timezone) · [Wheel](https://timepicker-ui.vercel.app/examples/plugins/wheel)\n\n```tsx\nimport { PluginRegistry } from \"timepicker-ui-react\";\nimport { RangePlugin } from \"timepicker-ui/plugins/range\";\nimport { TimezonePlugin } from \"timepicker-ui/plugins/timezone\";\nimport { WheelPlugin } from \"timepicker-ui/plugins/wheel\";\n\nPluginRegistry.register(RangePlugin);\nPluginRegistry.register(TimezonePlugin);\nPluginRegistry.register(WheelPlugin);\n\n\u003cTimepicker options={{ ui: { mode: \"wheel\" } }} /\u003e\n\u003cTimepicker options={{ range: { enabled: true } }} onRangeConfirm={(data) =\u003e {}} /\u003e\n\u003cTimepicker options={{ timezone: { enabled: true } }} onTimezoneChange={(data) =\u003e {}} /\u003e\n```\n\n## SSR / Next.js\n\n```tsx\n\"use client\";\n\nimport { Timepicker } from \"timepicker-ui-react\";\nimport \"timepicker-ui/main.css\";\n\nexport default function Page() {\n  return \u003cTimepicker options={{ clock: { type: \"12h\" } }} /\u003e;\n}\n```\n\nRenders a plain `\u003cinput\u003e` on the server, hydrates with the full picker on the client.\n\n## Exported Types\n\nAll types re-exported from `timepicker-ui`. Full list: [TypeScript docs](https://timepicker-ui.vercel.app/docs/api/typescript)\n\n```tsx\nimport type { TimepickerOptions, CallbacksOptions, ConfirmEventData, ... } from \"timepicker-ui-react\";\nimport { TimepickerUI, EventEmitter, PluginRegistry } from \"timepicker-ui-react\";\n```\n\n## Development\n\n```bash\ncd src \u0026\u0026 npm run build        # Build library\ncd src/docs \u0026\u0026 npm run dev     # Run demo\n```\n\n## Contributing\n\nContributions welcome! [Open an issue or PR](https://github.com/pglejzer/timepicker-ui-react/issues).\n\n## License\n\nMIT © [Piotr Glejzer](https://github.com/pglejzer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglejzer%2Ftimepicker-ui-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpglejzer%2Ftimepicker-ui-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglejzer%2Ftimepicker-ui-react/lists"}