Paramall-wheel-of-fortune NPM

React Custom Roulette

Features

Customizable design
Prize selection by props
Spinning animation
NEW! Multiple spins (see Multi Spin)
NEW! Customizable spin duration
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)
fontFamily	`string`	'Helvetica, sans-serif'	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
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.

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
}

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	Number for font size.

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