SpinnerWheel

Prize/fortune spinner wheel with configurable segments and spin animation.

Props

Prop	Type	Default	Description
`segments`	`SpinnerSegment[]`	—	Wheel segments (see below)
`duration`	`number`	`4000`	Spin animation duration in ms
`rotations`	`number`	`3`	Number of full rotations before landing
`mode`	`'trigger' \| 'continuous'`	`'trigger'`	`'trigger'` = spin on demand; `'continuous'` = spins on mount, call `spin()` to land
`onComplete`	`(segment: SpinnerSegment) => void`	—	Called when the wheel lands on a segment
`pointerColor`	`string`	`#22c55e`	Pointer / center accent color
`strokeColor`	`string`	`#ffffff`	Segment border color
`strokeWidth`	`number`	`2`	Segment border width
`centerRadius`	`number`	`14`	Center circle radius
`centerColor`	`string`	`#ffffff`	Center circle color
`className`	`string`	—	Container className
`style`	`CSSProperties`	—	Container style

SpinnerSegment

Property	Type	Description
`id`	`string`	Unique segment identifier
`label`	`string`	Display label on the wheel
`value`	`string`	Value returned on completion
`color`	`string`	Segment background color
`textColor`	`string`	Label text color (auto-detected from background if omitted)
`item`	`ReactNode`	Custom content to render instead of the text label

Ref Handle

Method	Description
`spin(targetIndex?)`	Spin the wheel. Lands on `targetIndex` if provided, otherwise random.

Example


const wheelRef = useRef<SpinnerWheelHandle>(null)
 
<SpinnerWheel
  ref={wheelRef}
  segments={[
    { id: '1', label: '10% OFF', value: '10', color: '#FF6B6B' },
    { id: '2', label: '25% OFF', value: '25', color: '#4ECDC4' },
    { id: '3', label: '50% OFF', value: '50', color: '#45B7D1' },
  ]}
  onComplete={(segment) => alert(`You won ${segment.label}!`)}
/>
 
<button onClick={() => wheelRef.current?.spin()}>Spin</button>