React-casino-roulette NPM

React Casino Roulette

The first open source React casino roulette. This includes both table and wheel. No canvas used, only pure HTML, CSS, and JS for the best performance. No loading screens needed.

That's like selling. Fewer clicks mean more purchases. Faster loading speed leads to higher conversion rates.

Live example - react-casino-roulette.ivanadmaers.com
Another one - codesandbox.io/s/react-casino-roulette-example-ksw8u4

If you need the same functionality, plus 2 supported types (American and European roulette), and plain CSS and JS implementation, take a look at - https://github.com/IvanAdmaers/casino-roulette.
Please, pay your attention, some of the bet types names (STRAIGHT_UP, CORNER, etc) you receive when handeling user's bet may be incorrect. Everything else works great. It's fixed in https://github.com/IvanAdmaers/casino-roulette.

Features

🚀 No canvas, pure HTML, CSS, JS
💪 The first open source casino roulette
🔥 Table + Wheel
⌛ No loading screens needed
✅ Ease of use
📝 MIT license
📦 Lightweight
🔧 Jest
🎉 NextJS, GatsbyJS and RemixJS support

Installation

# Via npm:
npm i react-casino-roulette
# Via yarn:
yarn add react-casino-roulette

Usage

Table

import { useState } from 'react';
import { RouletteTable } from 'react-casino-roulette';

import 'react-casino-roulette/dist/index.css';

export const Table = () => {
  const [bets, setBets] = useState({});

  const handleBet = (betData) => {
    const { id } = betData;

    setBets((prevState) => ({
      ...prevState,
      [id]: {
        icon: 'https://cdn-icons-png.flaticon.com/512/10095/10095709.png',
      },
    }));
  };

  return (
    <div style={{ maxWidth: 800, margin: 'auto' }}>
      <RouletteTable bets={bets} onBet={handleBet} />
    </div>
  );
};

Wheel

import { useState } from 'react';
import { RouletteWheel } from 'react-casino-roulette';

import 'react-casino-roulette/dist/index.css';

export const Wheel = () => {
  const [start, setStart] = useState(false);
  const [winningBet, setWinningBet] = useState('-1');

  const doSpin = () => {
    setWinningBet('00');
    setStart(true);
  };

  return (
    <div>
      <div
        style={{ display: 'flex', justifyContent: 'center' }}
      >
        <RouletteWheel start={start} winningBet={winningBet} />
      </div>
      <div>
        <button type="button" disabled={start} onClick={doSpin}>
          Spin
        </button>
      </div>
    </div>
  );
};

Props

Where * means required

Table

Prop	Type	Default value	Description
bets*	`object`	-	Object of bets for the table. See its `BetType` type here.
onBet*	`(params: IOnBetParams) => void`	-	Triggers when user choose a bet on the table. See its `IOnBetParams` interface here
isDebug	`boolean`	false	Sets debug mode

Wheel

Prop	Type	Default value	Description
start*	`boolean`	-	Sets when the wheel should start spinning
winningBet*	`string`	-	Sets the wheel winning bet. Available values: -1, 0, 00 and 1 - 36
onSpinningEnd	`() => void`	() => undefined	Triggers when the wheel stops spinning
withAnimation	`boolean`	true	Sets should the wheel plays rotating animation
addRest	`boolean`	true	Adds an animation of the ball shifting after the end of the spinning

FAQ

❓ Where can I find an example of using this package?
💬 Use the links below:

❓ How can I customize the table or wheel?
💬 At this moment this is possible by overriding default css styles.

❓ Can I use this with SSR?
💬 Of course. And if you are using NextJS we would like to recommend you to import this package dynamically to decrease your project final bundle size.

❓ What React versions does this package support?
💬 This project requires: