React-hook-roulette NPM

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

demo

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",
				},
			],
		},
	},
}