react-spin-prize

🎡 Modern, fully customizable prize wheel spinner component for React with TypeScript support.

🎮 Live Demo

• GitHub Pages: https://joshuaolusayo.github.io/react-spin-prize/
• CodeSandbox: Try it online
• StackBlitz: Edit in browser

Features

• 🎨 Fully customizable colors and styles
• 🎯 Precise winner selection
• 🎭 Smooth animations with easing
• 📱 Responsive and accessible
• 🔧 TypeScript support
• 🎪 Modern design with "SPIN" button in the center

Installation

npm install react-spin-prize
# or
yarn add react-spin-prize
# or
pnpm add react-spin-prize

Usage

import { SpinnerWheel } from 'react-spin-prize';

const items = [
  { id: 1, label: 'Prize 1', color: '#FF6B6B' },
  { id: 2, label: 'Prize 2', color: '#4ECDC4' },
  { id: 3, label: 'Prize 3', color: '#45B7D1' },
  { id: 4, label: 'Prize 4', color: '#FFA07A' },
];

function App() {
  const handleSpinComplete = (item) => {
    console.log('Winner:', item);
  };

  return (
    <SpinnerWheel
      items={items}
      onSpinComplete={handleSpinComplete}
      size={500}
      duration={5000}
    />
  );
}

Props

Prop	Type	Default	Description
items	SpinnerWheelItem[]	required	Array of items to display on the wheel
onSpinComplete	(item: SpinnerWheelItem) => void	-	Callback when spin completes
onButtonClick	() => void | Promise<void>	-	Callback when center button is clicked
spinning	boolean	-	External control of spinning state
duration	number	5000	Duration of spin animation in ms
size	number	500	Size of the wheel in pixels
fontSize	number	16	Font size for item labels
borderWidth	number	8	Width of the outer border
borderColor	string	'#333'	Color of the border
buttonText	string	'SPIN'	Text on the center button
buttonColor	string	'#333'	Background color of the button
buttonTextColor	string	'#fff'	Text color of the button
disabled	boolean	false	Disable the spin button
winningIndex	number	-	Force a specific winner (for testing)
autoSpinTrigger	string | number | boolean | null	-	Change this value to trigger a programmatic spin
textLayout	'radial' | 'horizontal'	'horizontal'	Text layout style: 'radial' for rotating text, 'horizontal' for edge-to-center text

SpinnerWheelItem

interface SpinnerWheelItem {
  id: string | number;
  label: string;
  color?: string;        // Background color of the segment
  textColor?: string;    // Text color (defaults to white)
}

Advanced Usage

Customization Examples

// Custom colors and icon
<SpinnerWheel
  items={items}
  buttonColor="#FF6B6B"
  buttonTextColor="#FFFFFF"
  buttonBorderColor="#FFD700"
  buttonBorderWidth={6}
  borderColor="#4ECDC4"
  buttonIcon={<span style={{ fontSize: "48px" }}>🎰</span>}
/>

// Custom size
<SpinnerWheel
  items={items}
  size={600}
  buttonSize={100}
  duration={8000}
/>

// With button click callback (e.g., for API calls before spinning)
<SpinnerWheel
  items={items}
  onButtonClick={async () => {
    // Make API call or perform any action when button is clicked
    await fetchSpinData();
  }}
  onSpinComplete={(item) => {
    console.log('Winner:', item);
  }}
/>

// Horizontal text layout (edge-to-center)
<SpinnerWheel
  items={items}
  textLayout="horizontal"
  onSpinComplete={(item) => {
    console.log('Winner:', item);
  }}
/>

License

MIT