Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit

* fontStyle and fontWeight are now available

* Feature/backwards (#122)

* feature: backward option added

* variable name modified

* change prop logic


Co-authored-by: Andres Carvajal <andrescarvajal@Andress-MacBook-Pro.local>

* increased to version 1.4.1 and modified documentation


Co-authored-by: Andres Carvajal <andrescarvajal@Andress-MacBook-Pro.local>
Co-authored-by: luchozamora1 <>

Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React Custom Roulette

npm version Types npm downloads

Customizable React roulette wheel with spinning animation

React Custom Roulette


  • Customizable design
  • Prize selection with props
  • Spinning animation (customizable spin duration)
  • [NEW!] Images as items (see Types)
  • [NEW!] Customizable pointer image
  • Multiple consecutive spins (see Multi Spin)
  • Compatible with TypeScript


$ npm install react-custom-roulette


$ yarn add react-custom-roulette


Wheel Component

import React from 'react'
import { Wheel } from 'react-custom-roulette'

const data = [
  { option: '0', style: { backgroundColor: 'green', textColor: 'black' } },
  { option: '1', style: { backgroundColor: 'white' } },
  { option: '2' },

export default () => (
      backgroundColors={['#3e3e3e', '#df3428']}


Prop Type Default Description
mustStartSpinning (required) boolean - Sets when the roulette must start the spinning animation
prizeNumber (required) number - Sets the winning option. It's value must be between 0 and data.lenght-1
data (required) Array<WheelData> - Array of options. Can contain styling information for a specific option (see WheelData)
onStopSpinning function () => null Callback function that is called when the roulette ends the spinning animation
backgroundColors Array<string> ['darkgrey', 'lightgrey'] Array of colors that will fill the background of the roulette options, starting from option 0
textColors Array<string> ['black'] Array of colors that will fill the text of the roulette options, starting from option 0
outerBorderColor string 'black' Color of the roulette's outer border line
outerBorderWidth number 5 Width of the roulette's outer border line (0 represents no outer border line)
innerRadius number [0..100] 0 Distance of the inner radius from the center of the roulette
innerBorderColor string 'black' Color of the roulette's inner border line
innerBorderWidth number 0 Width of the roulette's inner border line (0 represents no inner border line)
radiusLineColor string 'black' Color of the radial lines that separate each option
radiusLineWidth number 5 Width of the radial lines that separate each option (0 represents no radial lines)
fontFamily string 'Helvetica, Arial' Global font family of the option string. Non-Web safe fonts are fetched from All available fonts can be found there.
fontSize number 20 Global font size of the option string
fontWeight `number string` 'bold'
fontStyle string 'normal' Global font style of the option string
perpendicularText boolean false When 'true', sets the option texts perpendicular to the roulette's radial lines
textDistance number [0..100] 60 Distance of the option texts from the center of the roulette
spinDuration number [0.01 ..] 1.0 Coefficient to adjust the default spin duration
startingOptionIndex number - Set which option (through its index in the data array) will be initially selected by the roulette (before spinning). If not specified the roulette will render without choosing a starting option
pointerProps PointerProps { src: roulettePointer } Image source and CSS styling to apply to the pointer image.
disableInitialAnimation boolean false When 'true', disables the initial backwards wheel animation



interface WheelData {
  option?: string;
  image?: ImageProps;
  style?: StyleType; // Optional
  optionSize?: number; // Optional
Prop Type Default Description
option string '' String to be rendered inside an option.
image ImageProps - Image to be rendered inside an option. It is configured through ImageProps
style StyleType - Styles for option. It is configured through StyleType
optionSize number 1 Integer that sets the size of the option measured in roulette pieces. For example: if data provides 2 options A and B, and you set A's optionSize to 2, B's optionSize to 1, the roulette will render 3 pieces: 2 corresponding to A and 1 corresponding to B. Therefore, A will appear to be twice as big as B.


interface StyleType {
  backgroundColor?: string; // Optional
  textColor?: string; // Optional
  fontFamily?: string; // Optional
  fontSize?: number; // Optional
  fontWeight?: number | string; // Optional
  fontStyle?: string; // Optional
Prop Type Default Description
backgroundColor string 'darkgrey' or 'lightgrey' Background color for option
textColor string 'black' Text color
fontFamily string 'Helvetica, Arial' String containing text font and its fallbacks separated by commas
fontSize number 20 Font size number
fontWeight `number string` 'bold'
fontStyle string 'normal' Font style string


interface ImageProps {
  uri: string;
  offsetX?: number; // Optional
  offsetY?: number; // Optional
  sizeMultiplier?: number; // Optional
  landscape?: boolean; // Optional
Prop Type Default Description
uri string - Image source. It can be url or path.
offsetX number 0 Image offset in its X axis
offsetY number 0 Image offset in its Y axis
sizeMultiplier number 1 A value of 1 means image height is calculated as 200px * sizeMultiplier and width will be calculated to keep aspect ratio.
landscape boolean false If true, image will be rotated 90 degrees so as to render in a landscape orientation.


interface PointerProps {
  src?: string; // Optional
  style?: React.CSSProperties; // Optional
Prop Type Default Description
src string - Image src.
style React.CSSProperties - Styling for pointer image.

Multi Spin

Example (using useState)

import React, { useState } from 'react'
import { Wheel } from 'react-custom-roulette'

const data = [
  { option: '0' },
  { option: '1' },
  { option: '2' },

export default () => {
  const [mustSpin, setMustSpin] = useState(false);
  const [prizeNumber, setPrizeNumber] = useState(0);

  const handleSpinClick = () => {
    if (!mustSpin) {
      const newPrizeNumber = Math.floor(Math.random() * data.length);

  return (

        onStopSpinning={() => {
      <button onClick={handleSpinClick}>SPIN</button>


This project exists thanks to all the people who contribute!


This project is licensed under the MIT license, Copyright (c) 2023 Effectus Software. [License]