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}
    onSpinComplete={handleSpinComplete}
/>

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}
    onSpinComplete={handleSpinComplete}
/>

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.

onSpinComplete

A callback function that is called when the wheel has finished spinning and has landed on the final result. This is where you can handle end experience eg. UI effects, navigation, state updates etc.


const handleSpinComplete = () => {
    // Fire confetti, notify backend, etc.
};

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}
    onSpinComplete={handleSpinComplete}
/>

error

Shows the wheel in an error state when true.


<WheelOfFortune 
    segments={segments}
    spinResult={10}
    spinTimes={7}
    error={true}
    onSpinComplete={handleSpinComplete}
/>

errorText

Custom error message to display when in error state.


<WheelOfFortune 
    segments={segments}
    spinResult={10}
    spinTimes={3}
    error={true}
    errorText="Unable to load the wheel. Please try again."
    onSpinComplete={handleSpinComplete}
/>