DEV Community

Cover image for implementing Spin the wheel and win price in react js
Md. Khalid Hossen
Md. Khalid Hossen

Posted on

implementing Spin the wheel and win price in react js

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:

  1. Displays a spinning wheel with customizable options (e.g., percentages like "25%", "30%", etc.).
  2. Randomly selects a result when the wheel is spun.
  3. Allows you to customize the wheel’s appearance (colors, fonts, etc.).
  4. 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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
};

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)