Random Wheel with Weight Support

I'll create a spinning wheel component that supports weighted probabilities using React and Tailwind CSS.

How It Works

1. Weighted Segments: The wheel divides segments based on the weight of each item. Higher weights get larger segments, increasing their probability of being selected.
2. Spinning Animation: When you click "Spin the Wheel", it rotates for a random number of spins (5-10 full rotations) plus a random offset.
3. Winner Selection: After spinning completes, the component calculates which segment is at the pointer position and announces the winner.
4. Visual Feedback: Each segment has a different color, and the wheel has a smooth spinning animation with an easing effect.

Customization Options

You can easily customize this wheel by:

1. Changing the items array in App.tsx with your own items and weights
2. Adjusting the wheel size by modifying the width/height classes
3. Changing the colors of segments by updating the color property
4. Modifying the spin duration by changing the spinDuration variable

This implementation uses pure React and Tailwind CSS without any external dependencies, making it lightweight and easy to integrate into any React project.

Yes, there are libraries that can help you create a weighted random wheel in React more easily than building it from scratch. The most popular one is react-custom-roulette, which supports weighted segments and offers many customization options.

Here's how you can implement a weighted wheel using this library:

Benefits of Using react-custom-roulette

1. Built-in Weight Support: The library handles the weighted random selection logic for you.
2. Extensive Customization: You can customize colors, fonts, sizes, and animations.
3. Smooth Animations: The library provides smooth spinning animations with proper easing.
4. Responsive: Works well on different screen sizes.
5. Well-maintained: Regular updates and good community support.

How It Works

1. Setup: Install the library with npm install react-custom-roulette
2. Configuration: Define your data array with options and weights
3. Weight Calculation: The code calculates the total weight and selects a prize based on the weighted probability
4. Spinning: The wheel spins to the selected prize with a smooth animation
5. Result Handling: When spinning stops, the winner is displayed

This approach is much simpler than building the wheel from scratch, as the library handles all the complex animation and rendering logic for you.

Other Libraries

If you need additional features, you might also consider:

• react-wheel-of-prizes: Another wheel library with slightly different features
• react-fortune-wheel: Simpler but still effective for basic wheels
• react-canvas-confetti: Can be added to create celebration effects when a prize is won