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' | Global font weight of the option string | | 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' | Font weight string or number | | 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!

License

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