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

Property	Type	Description
name	string	Label for the roulette segment.
bg	string?	Background color of the roulette segment.
color	string?	Text color for the segment label.
weight	number?	Determines the segment's size relative to others.

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

Property	Type	Description
items	RouletteItem[]	Array of items to display on the roulette wheel.
onSpinUp	() => void	Optional callback executed when the roulette starts spinning.
onSpinDown	() => void	Optional callback executed when the roulette starts slowing down.
onSpinEnd	(result: string) => void	Optional callback executed when the roulette stops, returning the result.
options	Partial<RouletteOptions>	Optional settings to customize the roulette wheel.

Return Values

Property	Type	Description
roulette	RouletteCanvas	Contains the size of the roulette and a ref to the canvas element.
result	string	The result after the wheel stops spinning.
onStart	() => void	Function to start the wheel spinning.
onStop	() => void	Function to stop the wheel spinning.

Options

Property	Type	Default Value	Description
size	number	400	Diameter of the roulette wheel.
initialAngle	number	0	Starting angle of the wheel.
rotationDirection	RotationDirection	"clockwise"	Rotation direction.
maxSpeed	number	100	Maximum rotation speed.
acceleration	number	1	Acceleration rate until reaching max speed.
deceleration	number	1	Deceleration rate after stopping.
determineAngle	number	45	Angle for determining the selected item.
showArrow	boolean	true	Controls visibility of the selection arrow.
style	StyleOption		Customize roulette stylings.

StyleOption

CanvasStyle

Property	Type	Description
bg	string	Background color of the canvas.

PieStyle

Property	Type	Description
border	boolean	if set true, set border for each pie segment
borderColor	string
borderWidth	number
theme	PieTheme[]	Array of theme options for the pie segments.

LabelStyle

Property	Type	Description
font	string	Font style and size for the label text.
defaultColor	string	Default text color for the label.
align	CanvasTextAlign	Horizontal alignment of the label text.
baseline	CanvasTextBaseline	Vertical alignment of the label text.
offset	number	Position offset of the label from the center.

ArrowStyle

Property	Type	Description
bg	string	Background color of the arrow.
size	number	Size of the arrow.

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