iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
Features
Built on top of React Wheel Picker.
- Natural touch scrolling with smooth inertia, mouse drag and scroll for desktop.
- Infinite loop scrolling.
- Unstyled core for complete style customization.
- Full keyboard navigation and type-ahead search.
Installation
$ pnpm dlx shadcn@latest add @ncdai/wheel-picker
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",
disabled: true,
},
{
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.
Composition
Use the following composition to build a WheelPicker
WheelPickerWrapper
└── WheelPicker