react-roulette-board

Installation

npm

npm install react-roulette-board

Example

import React from "react";
import { RouletteBoard } from "react-roulette-board";

const PinComponent = () => {
  return (
    <div
      style={{
        width: 100,
        height: 100,
        borderRadius: "50%",
        backgroundColor: "red",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontWeight: "bold",
        color: "#FFFFFF",
      }}
    >
      START
    </div>
  );
};

const App = () => {
  return (
    <RouletteBoard
      size={8}
      targetIndex={2}
      rotateCount={30}
      onStart={false}
      onEnd={({ index, degree }) => {
        console.log("end", index, degree);
      }}
      width={300}
      height={300}
      backgroundImageSrc="https://example.com/assets/testImage.png"
      pinComponent={<PinComponent />}
    />
  );
};

Props

Prop	Required	Default	Type	Description
size	⭕️	2	number	The number of roulette compartment
targetIndex	⭕️	0	number	Target Index
rotateCount	❌	30	number	The number of roulette to rotate
onStart	⭕️	false	boolean	Start to rotate
onEnd	❌	-	({ index: number, degree: number}) => void	Executed when the roulette is finished
width	❌	300	number	The width of the roulette board
height	❌	300	number	The height of the roulette board
backgroundImageSrc	⭕️	""	string	Image to be put on the roulette board
pinComponent	❌	-	node	Children elements for pin