React Hook Roulette

Minimal roulette wheel component. built with React Hooks.

Features

• Easy Setup: Seamlessly integrates into React apps using React Hooks, simplifying embedding and state management.
• Canvas-Based Rendering: Uses HTML Canvas for high-performance rendering.
• Simple API: easy-to-use API for customization.

Demo

live demo available on stackblitz

Setup

npm

npm install react-hook-roulette

pnpm

pnpm add react-hook-roulette

yarn

yarn add react-hook-roulette

Code Example

import { Roulette, useRoulette } from 'react-hook-roulette';

const App = () => {
	const items = [
		{ name: "label1" },
		{ name: "label2" },
		{ name: "label3" },
		{ name: "label4" },
		{ name: "label5" },
		{ name: "label6" },
	];
	const { roulette, onStart, onStop, result } = useRoulette({ items });

	return (
		<div>
			<Roulette roulette={roulette} />
			<button type="button" onClick={onStart}>Start</button>
			<button type="button" onClick={onStop}>Stop</button>
			{result && <p>Result: {result}</p>}
		</div>
	);
};

API References

RouletteItem

If you want to set styling globally, please refer to the StyleOption section. (If both are specified, the one specified in rouletteItem takes precedence.)

useRoulette Hook

Props

Return Values

Options

StyleOption

CanvasStyle

PieStyle

LabelStyle

ArrowStyle

Default config

const option = {
	size: 400,
	maxSpeed: 100,
	rotationDirection: "clockwise",
	acceleration: 1,
	deceleration: 1,
	initialAngle: 0,
	determineAngle: 45,
	showArrow: true,
	style: {
		canvas: {
			bg: "#fff",
		},
		arrow: {
			bg: "#000",
			size: 16,
		},
		label: {
			font: "16px Arial",
			align: "right",
			baseline: "middle",
			offset: 0.75,
			defaultColor: "#000",
		},
		pie: {
			border: false,
			borderColor: '#000',
			borderWidth: 2,
			theme: [
				{
					bg: "#e0e7ff",
				},
				{
					bg: "#a5b4fc",
				},
				{
					bg: "#6366f1",
					color: "#fff",
				},
				{
					bg: "#4338ca",
					color: "#fff",
				},
			],
		},
	},
}

License

MIT