https://github.com/pglejzer/timepicker-ui-react
React wrapper for timepicker-ui v4.x - typed, SSR-safe, lightweight.
https://github.com/pglejzer/timepicker-ui-react
material-design material-design-3 picker react time timepicker timepicker-ui typescript
Last synced: 2 months ago
JSON representation
React wrapper for timepicker-ui v4.x - typed, SSR-safe, lightweight.
- Host: GitHub
- URL: https://github.com/pglejzer/timepicker-ui-react
- Owner: pglejzer
- License: mit
- Created: 2025-11-21T18:24:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-03-29T10:25:33.000Z (2 months ago)
- Last Synced: 2026-03-29T13:44:14.630Z (2 months ago)
- Topics: material-design, material-design-3, picker, react, time, timepicker, timepicker-ui, typescript
- Language: TypeScript
- Homepage: https://timepicker-ui.vercel.app/react
- Size: 70.3 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# timepicker-ui-react
Official React wrapper for [timepicker-ui](https://github.com/pglejzer/timepicker-ui) v4.x - clock & wheel time picker, full TypeScript, SSR-safe.
[](https://badge.fury.io/js/timepicker-ui-react)
[](https://img.shields.io/npm/l/timepicker-ui-react)
[](https://npmcharts.com/compare/timepicker-ui-react?minimal=true)
[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)
## Why timepicker-ui-react?
- **Thin wrapper** - all power comes from the battle-tested timepicker-ui core
- **Zero type duplication** - types re-exported directly from `timepicker-ui`
- **SSR-safe** - works in Next.js, Remix, Astro out of the box
- **Controlled & uncontrolled** - both `value` and `defaultValue` patterns
- **All input props** - extends `InputHTMLAttributes`, pass anything directly
- **Plugin support** - Timezone, Range, Wheel via `PluginRegistry`
## Installation
```bash
npm install timepicker-ui-react
```
> `timepicker-ui` is included as a dependency - no need to install it separately.
## Quick Start
```tsx
import { Timepicker } from "timepicker-ui-react";
import "timepicker-ui/main.css";
function App() {
return (
console.log("Selected:", data)}
/>
);
}
```
## API
Full 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)
```tsx
{}}
onCancel={(data) => {}}
onOpen={(data) => {}}
onUpdate={(data) => {}}
onSelectHour={(data) => {}}
onSelectMinute={(data) => {}}
onSelectAM={() => {}}
onSelectPM={() => {}}
onClear={(data) => {}}
onError={(data) => {}}
// Plugin callbacks
onTimezoneChange={(data) => {}}
onRangeConfirm={(data) => {}}
onRangeSwitch={(data) => {}}
onRangeValidation={(data) => {}}
// Any standard prop
className="my-input"
placeholder="Select time"
disabled={false}
id="timepicker-1"
/>
```
## Options Overview
Same 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)
```tsx
```
## Themes
Same 10 themes as core. [Browse all](https://timepicker-ui.vercel.app/docs/features/themes) · [Live examples](https://timepicker-ui.vercel.app/examples/themes/basic)
Available: `basic`, `crane`, `crane-straight`, `m3-green`, `m2`, `dark`, `glassmorphic`, `pastel`, `ai`, `cyberpunk`
```tsx
import "timepicker-ui/main.css";
import "timepicker-ui/theme-dark.css";
;
```
## Plugins
Docs: [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)
```tsx
import { PluginRegistry } from "timepicker-ui-react";
import { RangePlugin } from "timepicker-ui/plugins/range";
import { TimezonePlugin } from "timepicker-ui/plugins/timezone";
import { WheelPlugin } from "timepicker-ui/plugins/wheel";
PluginRegistry.register(RangePlugin);
PluginRegistry.register(TimezonePlugin);
PluginRegistry.register(WheelPlugin);
{}} />
{}} />
```
## SSR / Next.js
```tsx
"use client";
import { Timepicker } from "timepicker-ui-react";
import "timepicker-ui/main.css";
export default function Page() {
return ;
}
```
Renders a plain `` on the server, hydrates with the full picker on the client.
## Exported Types
All types re-exported from `timepicker-ui`. Full list: [TypeScript docs](https://timepicker-ui.vercel.app/docs/api/typescript)
```tsx
import type { TimepickerOptions, CallbacksOptions, ConfirmEventData, ... } from "timepicker-ui-react";
import { TimepickerUI, EventEmitter, PluginRegistry } from "timepicker-ui-react";
```
## Development
```bash
cd src && npm run build # Build library
cd src/docs && npm run dev # Run demo
```
## Contributing
Contributions welcome! [Open an issue or PR](https://github.com/pglejzer/timepicker-ui-react/issues).
## License
MIT © [Piotr Glejzer](https://github.com/pglejzer)