React Wheel Picker
iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
- 12
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 01
- 59
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 00
- AM
- PM
About
The Wheel Picker component is built on top of React Wheel Picker.
Installation
pnpm dlx shadcn@latest add https://chanhdai.com/r/wheel-picker.json
Usage
import {
WheelPicker,
WheelPickerWrapper,
type WheelPickerOption,
} from "@/components/wheel-picker";const options: WheelPickerOption[] = [
{
label: "React",
value: "react",
},
{
label: "Vue",
value: "vue",
},
{
label: "Angular",
value: "angular",
},
{
label: "Svelte",
value: "svelte",
},
];
export function WheelPickerDemo() {
const [value, setValue] = useState("react");
return (
<WheelPickerWrapper>
<WheelPicker options={options} value={value} onValueChange={setValue} />
</WheelPickerWrapper>
);
}See the React Wheel Picker documentation for more information.
Examples
Multiple Pickers, Infinite Loop
- 12
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 01
- 59
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 00
- AM
- PM