react-spinning-canvas-wheel

React Spinning Canvas Wheel

Features

• Written in TypeScript
• High DPI screens support
• SSR support
• Customizable timing function

Installation

npm i react-spinning-canvas-wheel

yarn add react-spinning-canvas-wheel

Usage

import SpinningWheel, {
  SpinningWheelRef,
  WheelSegment,
} from "react-spinning-canvas-wheel";

const SEGMENTS: WheelSegment[] = [
  { title: "Metal Gear Solid" },
  { title: "Dark Souls 2" },
  { title: "Escape From Tarkov" },
  { title: "It Takes Two" },
  { title: "Resident Evil Village" },
];

const Wheel = () => {
  const spinningWheelRef = useRef<SpinningWheelRef>();

  return (
    <div>
      {/* startSpinning(secondsToSpin: number, speed: number) */}
      <button onClick={() => spinningWheelRef.current.startSpinning(30, 4)}>
        Start
      </button>
      <button onClick={() => spinningWheelRef.current.stopSpinning()}>
        Stop
      </button>
      <SpinningWheel
        size={640}
        segments={segments}
        spinningWheelRef={spinningWheelRef}
        onSegmentChange={(index) => console.log("currentSegmentIndex:", index)}
        onSpinStart={() => console.log("started")}
        onSpinEnd={(winnerIndex) => console.log("winnerIndex:", winnerIndex)}
      />
    </div>
  );
};