Developer Tools / @methrax/spin-wheel / Component API

Component API

Inputs

Input	Type	Default	Description
`sectors`	`WheelSector[]`	required	Sector configuration rendered by the wheel.
`numberOfSpinnings`	`number`	`2`	Number of complete rotations before stopping.
`spinDuration`	`number`	`5000`	Spin animation duration in milliseconds.
`centerPinLabel`	`string`	`undefined`	Text displayed inside the center pin.
`showCenterPin`	`boolean`	`false`	Controls center-pin visibility.

Outputs

Output	Payload	Description
`spinStart`	`void`	Emitted when spinning begins.
`spinComplete`	`WheelSector`	Emitted when the wheel reaches the selected sector.

`WheelSector`

export interface WheelSector {
  id: string | number;
  label: string;
  color: string;
  textColor?: string;
}

Example:

const gold: WheelSector = {
  id: "gold",
  label: "Gold Prize",
  color: "#f59e0b",
  textColor: "#111827",
};

`spinToResult(id)`

Spin and stop on the sector matching the supplied ID.

this.wheel.spinToResult("gold");

`spinRandom()`

Select a sector randomly and animate the wheel to the result.

this.wheel.spinRandom();

Lifecycle

stateDiagram-v2
    [*] --> Idle
    Idle --> Spinning: spinRandom() / spinToResult()
    Spinning --> Completed: animation ends
    Completed --> Idle: ready for next spin