Skip to content
timepicker-ui
React · Callbacks

onCancel

Handle cancellation when user closes the picker

Cancel Callback

The onCancel event fires when user clicks Cancel or backdrop:

Cancellation Handler

Tracks how many times picker was cancelled

Cancelled: 0 times

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2import { useState } from "react";
3

4function App() {
5  const [cancelCount, setCancelCount] = useState(0);
6

7  return (
8    <div>
9      <Timepicker
10        onCancel={() => {
11          setCancelCount((prev) => prev + 1);
12        }}
13      />
14      <p>Cancelled: {cancelCount} times</p>
15    </div>
16  );
17}

Use Cases

  • Revert form changes
  • Track user behavior analytics
  • Reset temporary state
  • Show "selection cancelled" message