React

Quick Start

Get started with your first timepicker component in minutes

Basic Usage

Import the Timepicker component and CSS, then use it in your React component:

index.tsxtsx

1import { Timepicker } from "timepicker-ui-react";
2import "timepicker-ui/main.css";
3
4function App() {
5  return (
6    <Timepicker
7      placeholder="Select time"
8      onConfirm={(data) => {
9        console.log(data.hour, data.minutes, data.type);
10      }}
11    />
12  );
13}

Common Patterns

Controlled Component

Manage timepicker value with React state:

index.tsxtsx

1import { Timepicker } from "timepicker-ui-react";
2import { useState } from "react";
3
4function App() {
5  const [time, setTime] = useState("12:00 PM");
6
7  return (
8    <Timepicker
9      value={time}
10      onUpdate={(data) => {
11        setTime(`${data.hour}:${data.minutes} ${data.type}`);
12      }}
13    />
14  );
15}

With Options

Customize timepicker with options:

index.tsxtsx

1<Timepicker
2  placeholder="Select time"
3  options={{
4    clock: { type: "24h" },
5    ui: { theme: "dark" }
6  }}
7  onConfirm={(data) => console.log(data)}
8/>

In Forms

Use with form validation:

index.tsxtsx

1<form onSubmit={handleSubmit}>
2  <Timepicker
3    name="appointment-time"
4    required
5    value={time}
6    onUpdate={(data) => {
7      setTime(`${data.hour}:${data.minutes} ${data.type}`);
8    }}
9  />
10  <button type="submit">Submit</button>
11</form>