WheelOfFortune
This component displays an interactive spinning wheel that lands on a predetermined result
Basic Usage
import { WheelOfFortune } from "@krakentech/coral";
<WheelOfFortune
segments={[
{ display: "£1", value: 1 },
{ display: "£10", value: 10 },
{ display: "£100", value: 100 },
{ display: "£1", value: 1 },
{ display: "£1", value: 1 },
{ display: "£100", value: 100 },
{ display: "£1", value: 1 },
{ display: "£1000", value: 1000 },
{ display: "£1", value: 1 },
{ display: "£1", value: 1 },
{ display: "£10", value: 10 },
{ display: "£1", value: 1 },
]}
spinResult={10}
spinTimes={5}
spin={spin}
pending={pending}
onSpinSubmit={handleSubmit}
/>;Properties
title
An object containing keys wheel and indicator. This allows you to set custom accessible titles for screen readers.
segments
An array of exactly 12 segments that define the wheel. Each segment must have a display string and a value number.
<WheelOfFortune
segments={[
{ display: "£1", value: 1 },
{ display: "£10", value: 10 },
{ display: "£100", value: 100 },
// ... exactly 12 segments required
]}
spinResult={10}
spinTimes={5}
spin={spin}
pending={pending}
onSpinSubmit={handleSubmit}
/>spinResult
The value that determines which segment the wheel will land on. Must match one of the value properties in the segments array.
spinTimes
Number of times the wheel spins before stopping on the result. We recommend between 5 and 9.
spin
A boolean that triggers the spinning animation when set to true.
pending
A boolean that indicates whether the wheel is in a loading state.
onSpinSubmit
A callback function that is fired when the wheel is clicked. This is where you would typically handle backend communication to determine the spin result.
const handleSubmit = () => {
// Handle spin submission logic here
};appearance
Controls the visual style of the wheel.
<WheelOfFortune
appearance="loyalty"
segments={[
{ display: "8 points", value: 8 },
{ display: "80 points", value: 80 },
{ display: "800 points", value: 800 },
// ... exactly 12 segments required
]}
spinResult={80}
spinTimes={7}
spin={spin}
pending={pending}
onSpinSubmit={handleSubmit}
/>error
Shows the wheel in an error state when true.
<WheelOfFortune
segments={segments}
spinResult={10}
spinTimes={7}
spin={spin}
pending={pending}
onSpinSubmit={handleSubmit}
error={true}
/>errorText
Custom error message to display when in error state.
<WheelOfFortune
segments={segments}
spinResult={10}
spinTimes={3}
spin={spin}
pending={pending}
onSpinSubmit={handleSubmit}
error={true}
errorText="Unable to load the wheel. Please try again."
/>