Spinning Picker Wheel

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

Live example of usage: Icebreaker Questions

Features

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

Installation

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.

Usage

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

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

4. Finding or Creating Sound Effects

You can find free spinning wheel sound effects from:

• Freesound.org - Search for "wheel spin" or "roulette"
• Mixkit - Free sound effects library
• Zapsplat - 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