Command Palette

Search for a command to run...

GitHub

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://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

Loading...

React Hook Form

Loading...