Smooth iOS-Style Selection for Web Apps – React Wheel Picker

Description:

React Wheel Picker is a lightweight, highly customizable component that creates smooth, iOS-style wheel pickers on your React applications.

Features

• 📱 Natural touch scrolling with smooth inertia effect
• 🖱️ Mouse drag and scroll support for desktop
• 🔄 Infinite loop scrolling option
• 🎨 Unstyled components for complete style customization
• ⚡️ Easy installation via shadcn CLI
• 🔧 Flexible API for various use cases

Use Cases

• Date and time selection in scheduling applications
• Currency or unit conversion interfaces
• Custom dropdown menus for form inputs
• Age selection in registration forms
• Selecting quantities in e-commerce product pages

How to Use It

1. Install the package with NPM:

npm install react-wheel-picker

2. Import the component:

import { WheelPicker } from 'react-wheel-picker';

3. Use the component in your React application:

const options = ['Option 1', 'Option 2', 'Option 3'];
function MyComponent() {
  const handleChange = (selectedValue) => {
    console.log('Selected:', selectedValue);
  };
  return (
    <WheelPicker
      data={options}
      onChange={handleChange}
      infiniteLoop={true}
      selectedIndex={0}
    />
  );
}

4. Available component props.

• data: Array of options to display in the picker
• onChange: Callback function triggered when selection changes
• infiniteLoop: Boolean to enable/disable infinite scrolling
• selectedIndex: Initial selected index
• itemHeight: Height of each item in pixels
• visibleItemCount: Number of visible items

FAQs

Q: Can I customize the appearance of the wheel picker?
A: Absolutely. The component is unstyled by default, allowing you to apply your own CSS for complete visual customization.

Q: Does it support keyboard navigation?
A: Yes, the component supports keyboard navigation out of the box for accessibility.

Q: How does performance scale with large datasets?
A: The component uses virtualization techniques to maintain smooth performance even with large lists. However, for extremely large datasets (1000+ items), you need to implement pagination or lazy loading.

Preview