Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



Version published
Install size
117 kB



React Roulette Pro

npm version npm downloads license

The best React roulette. Focus on optimization, customization and ease of use. Live example -

React Roulette Pro 3.0 realised! See these release notes and this migration guide


  • 🚀 Optimization
  • 🎨 Easily customizable
  • 🔌 Design plugins architecture [🔥NEW🔥]
  • 🔫 Two types: horizontal and vertical [🔥NEW🔥]
  • 💪 Powerful
  • ✅ Ease of use
  • 📝 MIT license
  • 🔥 Just cool
  • 📦 Lightweight
  • 🔧 Well-tested
  • 🎉 NextJS, GatsbyJS and RemixJS support


# Via npm:
npm i react-roulette-pro

# Via yarn:
yarn add react-roulette-pro


import { useState } from 'react';

import RoulettePro from 'react-roulette-pro';
import 'react-roulette-pro/dist/index.css';

const prizes = [
    image: '',
    image: '',
    image: '',
    image: '',
    image: '',

const winPrizeIndex = 0;

const reproductionArray = (array = [], length = 0) => [
    .map(() => array[Math.floor(Math.random() * array.length)]),

const reproducedPrizeList = [
  ...reproductionArray(prizes, prizes.length * 3),
  ...reproductionArray(prizes, prizes.length),

const generateId = () =>

const prizeList = => ({
  id: typeof crypto.randomUUID === 'function' ? crypto.randomUUID() : generateId(),

const App = () => {
  const [start, setStart] = useState(false);

  const prizeIndex = prizes.length * 4 + winPrizeIndex;

  const handleStart = () => {
    setStart((prevState) => !prevState);

  const handlePrizeDefined = () => {
    console.log('🥳 Prize defined! 🥳');

  return (
      <button onClick={handleStart}>Start</button>

export default App;


Where * means required

PropTypeDefault valueDescription
start*boolean-Sets when the roulette must start spinning
prizes*Array-Array of objects. Objects must have required fields: id and image. A field text is optional. Each prize must have a unique id. Make sure you pass enough prize items for correct spinning. See an example in the Usage section above.
prizeIndex*number-The index of a prize that will win
typestringhorizontalThe roulette type. Available values: horizontal, vertical
onPrizeDefinedFunction() => {}Function to be called when the roulette stops spinning
spinningTimenumber10The roulette spinning time in seconds
prizeItemRenderFunction(item) => JSX-Function that renders the roulette prize items
topChildrennode-Children before the roulette prize list
bottomChildrennode-Children after the roulette prize list
designPlugin(props) => ({})-Design plugin for the roulette. If not setted the roulette will use its default built-in design. See this guide to know how to create your own design plugin
defaultDesignOptionsobject{}Default design options. Available options: hideCenterDelimiter - optional, boolean type and prizesWithText - optional, boolean type
classesobject{}Classes that will be applied to the roulette. Available keys: wrapper - the roulette wrapper class, prizeListWrapper - the roulette prize list class and prizeItem - class for prize items
soundWhileSpinningstring-Path to a sound file that will be played while the roulette spinning [May be deprecated in the future]
optionsobject{}The roulette options. Available options: stopInCenter - optional, boolean type and withoutAnimation - optional, boolean type
transitionFunctionstringcubic-bezier(0.0125, 0.1, 0.1, 1)The roulette animation transition function

Design plugins


🧐 Where can I find an example of how to use the package?
📣 You can find a live example on this site - and in the example folder.

🧐 How can I customize the roulette?
📣 First, you can pass a prizeItemRenderFunction to render prize items by yourself. Second, you can use a specific design plugin. Third, you can pass your specific classes via classes prop. Avoid to rewrite the roulette and its plugins default styles.

🧐 Is it possible to use this package with SSR?
📣 Of course! This package does not use a global object window. You can use this package without any problems. And I'd like to recommend you to use dynamic in NextJS to decrease your bundle size and render it only on client side.

import dynamic from 'next/dynamic';

const RoulettePro = dynamic(() => import('react-roulette-pro'), {
  ssr: false,

🧐 What version of React does this package support?
📣 Your versions should be:

  • react >=17.0.0
  • react-dom >=17.0.0
  • NodeJS >=10

🧐 Are pull requests welcome?
📣 Any ideas to improve this package are very welcome!

How to bootstrap the project locally

  1. Clone the project

  2. Run

npm ci i

npm start

The last command runs webpack to compile our package to a dist folder

  1. cd example/

  2. Run

npm ci i

npm start

The last command runs webpack dev server

  1. Enjoy the magic!

enjoying the magic



Copyright (c) 2021-present, Ivan Admaers



Last updated on 05 Mar 2024

Did you know?


Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap


Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc