React 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 react-question-wheel
# or
yarn add react-question-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 'react-question-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. |

Styling

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

License

MIT

Getting Started with example application

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.