GitHubGitHub

React Wheel Picker

iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.

Loading...

About

The Wheel Picker component is built on top of React Wheel Picker.

Installation

pnpm dlx shadcn@latest add https://kyuu/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",
  },
];
 
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

Loading...

Form

Loading...