React Custom Roulette

Customizable React roulette wheel with spinning animation

Features

Customizable design
Prize selection by props
Spinning animation
[NEW!] Multiple spins (see Multi Spin)
Compatible with TypeScript

Install

$ npm install react-custom-roulette

$ 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)
fontSize	`number`	20	Font size 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

Types

WheelData

interface WheelData {
  option: string;
  style?: StyleType; // Optional
}

StyleType

interface StyleType {
  backgroundColor?: string; // Optional
  textColor?: string; // Optional
}

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 = () => {
    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!

littledouzi/react-custom-roulette

React Custom Roulette

Features

Install

Quickstart

Wheel Component

Props

Types

WheelData

StyleType

Multi Spin

Example (using useState)

Contributors

License