React Roulette Pro

The best React roulette. Focus on optimization, customization and ease of use. Live example - react-roulette-pro.ivanadmaers.com

React Roulette Pro 3.0 realised! See these release notes and this migration guide

Features

• 🚀 Optimization
• 🎨 Easily customizable
• 🔌 Design plugins architecture [🔥NEW🔥]
• 🔫 Two types: horizontal and vertical [🔥NEW🔥]
• 💪 Powerful
• ✅ Ease of use
• 📝 MIT license
• 🔥 Just cool
• 📦 Lightweight
• 🔧 Well-tested
• 🎉 NextJS, GatsbyJS and RemixJS support

Installation

# Via npm:
npm i react-roulette-pro

# Via yarn:
yarn add react-roulette-pro

Usage

import { useState } from 'react';

import RoulettePro from 'react-roulette-pro';
import 'react-roulette-pro/dist/index.css';

const prizes = [
  {
    image: 'https://i.ibb.co/6Z6Xm9d/good-1.png',
  },
  {
    image: 'https://i.ibb.co/T1M05LR/good-2.png',
  },
  {
    image: 'https://i.ibb.co/Qbm8cNL/good-3.png',
  },
  {
    image: 'https://i.ibb.co/5Tpfs6W/good-4.png',
  },
  {
    image: 'https://i.ibb.co/64k8D1c/good-5.png',
  },
];

const winPrizeIndex = 0;

const reproductionArray = (array = [], length = 0) => [
  ...Array(length)
    .fill('_')
    .map(() => array[Math.floor(Math.random() * array.length)]),
];

const reproducedPrizeList = [
  ...prizes,
  ...reproductionArray(prizes, prizes.length * 3),
  ...prizes,
  ...reproductionArray(prizes, prizes.length),
];

const generateId = () =>
  `${Date.now().toString(36)}-${Math.random().toString(36).substring(2)}`;

const prizeList = reproducedPrizeList.map((prize) => ({
  ...prize,
  id: typeof crypto.randomUUID === 'function' ? crypto.randomUUID() : generateId(),
}));

const App = () => {
  const [start, setStart] = useState(false);

  const prizeIndex = prizes.length * 4 + winPrizeIndex;

  const handleStart = () => {
    setStart((prevState) => !prevState);
  };

  const handlePrizeDefined = () => {
    console.log('🥳 Prize defined! 🥳');
  };

  return (
    <>
      <RoulettePro
        prizes={prizeList}
        prizeIndex={prizeIndex}
        start={start}
        onPrizeDefined={handlePrizeDefined}
      />
      <button onClick={handleStart}>Start</button>
    </>
  );
};

export default App;

Props

Where * means required

Design plugins

• rrp-graceful-lines-plugin

FAQ

🧐 Where can I find an example of how to use the package?
📣 You can find a live example on this site - react-roulette-pro.ivanadmaers.com and in the example folder.

🧐 How can I customize the roulette?
📣 First, you can pass a prizeItemRenderFunction to render prize items by yourself. Second, you can use a specific design plugin. Third, you can pass your specific classes via classes prop. Avoid to rewrite the roulette and its plugins default styles.

🧐 Is it possible to use this package with SSR?
📣 Of course! This package does not use a global object window. You can use this package without any problems. And I'd like to recommend you to use dynamic in NextJS to decrease your bundle size and render it only on client side.

import dynamic from 'next/dynamic';

const RoulettePro = dynamic(() => import('react-roulette-pro'), {
  ssr: false,
});

🧐 What version of React does this package support?
📣 Your versions should be:

• react >=17.0.0
• react-dom >=17.0.0
• NodeJS >=10

🧐 Are pull requests welcome?
📣 Any ideas to improve this package are very welcome!

How to bootstrap the project locally

1. Clone the project

2. Run

npm ci i

npm start

The last command runs webpack to compile our package to a dist folder

3. cd example/

4. Run

npm ci i

npm start

The last command runs webpack dev server

5. Enjoy the magic!

License

MIT

Copyright (c) 2021-present, Ivan Admaers