React Custom Roulette

Customizable React roulette wheel with spinning animation

Features

• 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

Install

$ npm install react-custom-roulette

or

$ yarn add react-custom-roulette

Quickstart

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 () => (
  <>
    <Wheel
      mustStartSpinning={mustSpin}
      prizeNumber={3}
      data={data}
      backgroundColors={['#3e3e3e', '#df3428']}
      textColors={['#ffffff']}
    />
  </>
)

Props

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 https://fonts.google.com/. 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

Types

WheelData

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.

StyleType

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

ImageProps

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.

PointerProps

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);
      setPrizeNumber(newPrizeNumber);
      setMustSpin(true);
    }
  }

  return (
    <>
      <Wheel
        mustStartSpinning={mustSpin}
        prizeNumber={prizeNumber}
        data={data}

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

Contributors

This project exists thanks to all the people who contribute!

• Luis Felipe Zamora
• Martin Nazabal
• JP Mazza
• TakeshiOnishi
• Gastón González
• Juan Pablo Martinez
• Andres Carvajal

License

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