Have you ever wanted to create a fun and interactive spin wheel for your web app? Whether it’s for a game, a giveaway, or just to add some flair to your project, a spin wheel can be a great addition. In this post, I’ll walk you through how I built a customizable spin wheel component using React and the react-custom-roulette
library.
What We’re Building
We’re creating a SpinWheel component that:
- Displays a spinning wheel with customizable options (e.g., percentages like "25%", "30%", etc.).
- Randomly selects a result when the wheel is spun.
- Allows you to customize the wheel’s appearance (colors, fonts, etc.).
- Provides a callback to handle the winning value when the wheel stops.
Code Walkthrough
Let’s dive into the code and see how it all comes together.
Dependencies
First, you’ll need to install the react-custom-roulette library:
yarn add react-custom-roulette
The SpinWheel Component
import { useState } from "react";
import { Wheel } from "react-custom-roulette";
const SpinWheel = ({ setWiningValue }) => {
// Define the options for the wheel
const data = [
{ option: "25%" },
{ option: "30%" },
{ option: "35%" },
{ option: "45%" },
{ option: "55%" },
{ option: "65%" },
{ option: "75%" },
];
// State to control spinning and prize selection
const [mustSpin, setMustSpin] = useState(false);
const [prizeNumber, setPrizeNumber] = useState(0);
// Handle the spin button click
const handleSpinClick = () => {
const newPrizeNumber = Math.floor(Math.random() * data.length);
setPrizeNumber(newPrizeNumber);
setMustSpin(true);
};
return (
<div className="relative">
{/* Wheel Component */}
<Wheel
mustStartSpinning={mustSpin}
prizeNumber={prizeNumber}
data={data}
fontSize={22}
onStopSpinning={() => {
setMustSpin(false);
setWiningValue(data[prizeNumber].option); // Pass the winning value to the parent
}}
backgroundColors={[
"#FEC60D",
"#0496BB",
"#E42220",
"#C5037E",
"#444F96",
"#F38F1D",
"#058F5B",
]}
textColors={["#ffffff"]}
/>
{/* Spin Button */}
<div className="z-10 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
<button
onClick={handleSpinClick}
className="bg-[#800080] text-white border-2 border-solid border-white w-[60px] h-[60px] rounded-full"
>
Spin
</button>
</div>
</div>
);
};
export default SpinWheel;
Key Features Explained
Customizable Options
The data array defines the options displayed on the wheel. Each option is an object with an option property (e.g., { option: "25%" }). You can easily modify this array to include any text or values you want.
Randomized Result
When the user clicks the "Spin" button, the handleSpinClick function selects a random index from the data array and sets it as the prizeNumber. The wheel then spins and stops at the selected option.This is the hack we only allow price 3 three options as winpriz
Callback for Winning Value
The setWiningValue prop is a callback function that receives the winning value when the wheel stops spinning. This allows you to handle the result in the parent component (e.g., display it, log it, etc.).
Customizable Appearance
The backgroundColors and textColors props let you customize the wheel’s appearance. You can also adjust the fontSize and other styles to match your design.
Important Note:
If you want to customized win prize you need to modified below functions according to requirements.Let's say i only allow first three items as win prize during that time you need to modified prize calculations.
const handleSpinClick = () => {
const newPrizeNumber = Math.floor(Math.random() * data.length);
setPrizeNumber(newPrizeNumber);
setMustSpin(true);
};
Top comments (0)