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
Prop | Type | Default value | Description |
---|---|---|---|
start* | boolean |
- | Sets when the roulette must start spinning |
prizes* | Array |
- | Array of objects. Objects must have required fields: id and image . A field text is optional. Each prize must have a unique id . Make sure you pass enough prize items for correct spinning. See an example in the Usage section above. |
prizeIndex* | number |
- | The index of a prize that will win |
type | string |
horizontal | The roulette type. Available values: horizontal, vertical |
onPrizeDefined | Function |
() => {} | Function to be called when the roulette stops spinning |
spinningTime | number |
10 | The roulette spinning time in seconds |
prizeItemRenderFunction | (item) => JSX |
- | Function that renders the roulette prize items |
topChildren | node |
- | Children before the roulette prize list |
bottomChildren | node |
- | Children after the roulette prize list |
designPlugin | (props) => ({}) |
- | Design plugin for the roulette. If not setted the roulette will use its default built-in design. See this guide to know how to create your own design plugin |
defaultDesignOptions | object |
{} | Default design options. Available options: hideCenterDelimiter - optional, boolean type and prizesWithText - optional, boolean type |
classes | object |
{} | Classes that will be applied to the roulette. Available keys: wrapper - the roulette wrapper class, prizeListWrapper - the roulette prize list class and prizeItem - class for prize items |
soundWhileSpinning | string |
- | Path to a sound file that will be played while the roulette spinning |
options | object |
{} | The roulette options. Available options: stopInCenter - optional, boolean type and withoutAnimation - optional, boolean type |
transitionFunction | string |
cubic-bezier(0.0125, 0.1, 0.1, 1) | The roulette animation transition function |
Design plugins
FAQ
📣 You can find a live example on this site - react-roulette-pro.ivanadmaers.com and in the example folder.
📣 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.
import dynamic from 'next/dynamic';
const RoulettePro = dynamic(() => import('react-roulette-pro'), {
ssr: false,
});
- 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
-
Clone the project
-
Run
npm ci i
npm start
The last command runs webpack to compile our package to a dist folder
-
cd example/
-
Run
npm ci i
npm start
The last command runs webpack dev server
- Enjoy the magic!
License
Copyright (c) 2021-present, Ivan Admaers