React Wheel of Fortune

Creating a spinning wheel in React can be a fun project. You can use HTML, CSS, and JavaScript (or JSX in React) to build a simple spinning wheel

Installation

Install react-spin-to-wheel with npm

  npm install react-spin-to-wheel

Usage/Examples

import React  from 'react'
import SpiWheel from 'react-spin-to-wheel/index'

const App = () => {
    const segments = [
        {
            color: '#db7093',
            value: 'Decoration'
        },
        {
            color: '#20b2aa',
            value: 'Recharge'
        },
        {
            color: '#d63e92',
            value: 'Movie Ticket'
        },
        {
            color: '#daa520',
            value: 'Refrigrator'
        },
        {
            color: '#ff340f',
            value: 'Air Conditionar'
        },
        {
            color: '#ff7f50',
            value: 'Ring'
        },
        {
            color: '#3cb371',
            value: 'Watch'
        },
        {
            color: '#4169e1',
            value: 'Laptop'
        }

    ];

    const spinOutput = result => {
        alert(result)
    }
    return (
        <SpiWheel segments={segments} spinOutput={spinOutput} />
    )
}

export default App

Documentation

Tech Stack

Client: React Js

Support

For support, email playerofcode@gmail.com or join our Player Of Code channel.

🚀 About Me

I'm a full stack developer with 4+ years of Experience

Package detail

react-spin-to-wheel

readme