# Spinning Picker Wheel

A customizable, animated spinning question wheel component for React applications.

Live example of usage: [Icebreaker Questions](https://www.icebreakerquestions.org)

## Features

- 🎡 Smooth spinning animation
- 🎨 Customizable colors
- 🔊 Optional sound effect
- 📱 Responsive design
- ♿ Accessible

## Installation

```bash
npm install spinning-picker-wheel
# or
yarn add spinning-picker-wheel
```

## Prerequisites

This component uses **Tailwind CSS** for styling. Ensure Tailwind CSS is configured in your project.

If you haven't set up Tailwind CSS yet, follow the [official guide](https://tailwindcss.com/docs/guides/create-react-app).

## Usage

```tsx
import React from 'react';
import { QuestionWheel } from 'spinning-picker-wheel';

const App = () => {
  const questions = [
    "What is your favorite movie?",
    "Where would you like to travel?",
    "What is your hidden talent?",
    // ... add more questions
  ];

  return (
    <div className="p-8 flex justify-center">
      <QuestionWheel 
        questions={questions} 
        soundUrl="/spin-sound.mp3" // Optional: Path to your sound file
      />
    </div>
  );
};

export default App;
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `questions` | `string[]` | Required | Array of questions to display on the wheel. |
| `soundUrl` | `string` | `undefined` | URL to an audio file (mp3) to play during spin. |
| `colors` | `string[]` | `DEFAULT_COLORS` | Array of hex color codes for the wheel segments. |

## Adding Spinning Sound

To add a spinning sound effect to your wheel, follow these steps:

### 1. Prepare Your Audio File

- Use an **MP3** format audio file
- Keep the file size small (under 100KB recommended) for better performance
- The sound should be short (1-3 seconds) as it will play during the spin

### 2. Add the Audio File to Your Project

#### For Next.js Projects:
Place your audio file in the `public` folder:
```
your-project/
├── public/
│   └── spin-sound.mp3
├── app/
└── ...
```

#### For Create React App:
Place your audio file in the `public` folder:
```
your-project/
├── public/
│   └── spin-sound.mp3
├── src/
└── ...
```

### 3. Reference the Sound in Your Component

```tsx
<QuestionWheel 
  questions={questions} 
  soundUrl="/spin-sound.mp3"
/>
```

### 4. Finding or Creating Sound Effects

You can find free spinning wheel sound effects from:
- [Freesound.org](https://freesound.org/) - Search for "wheel spin" or "roulette"
- [Mixkit](https://mixkit.co/free-sound-effects/) - Free sound effects library
- [Zapsplat](https://www.zapsplat.com/) - Free sound effects (requires attribution)

**Note:** The component includes a sound toggle button, allowing users to mute/unmute the sound effect.

## Styling

The component uses Tailwind CSS classes. You can wrap the component in a container to control its size and positioning.

## License

MIT