|
1 | | -# React-Hook-Roulette |
| 1 | +# React Hook Roulette |
2 | 2 | Minimal roulette wheel component. built with React Hooks. |
| 3 | + |
| 4 | +## Features |
| 5 | +- Easy Setup: Seamlessly integrates into React apps using React Hooks, simplifying embedding and state management. |
| 6 | +- Canvas-Based Rendering: Uses HTML Canvas for high-performance rendering. |
| 7 | +- Simple API: easy-to-use API for customization. |
| 8 | + |
| 9 | +## Demo |
| 10 | + |
| 11 | + |
| 12 | +## Setup |
| 13 | +### npm |
| 14 | +```sh |
| 15 | +npm install react-hook-roulette |
| 16 | +``` |
| 17 | +### pnpm |
| 18 | +```sh |
| 19 | +pnpm add react-hook-roulette |
| 20 | +``` |
| 21 | +### yarn |
| 22 | +```sh |
| 23 | +yarn add react-hook-roulette |
| 24 | +``` |
| 25 | + |
| 26 | +### Code Example |
| 27 | +```tsx |
| 28 | +import { Roulette, useRoulette } from 'react-hook-roulette'; |
| 29 | + |
| 30 | +const App = () => { |
| 31 | + const data = [ |
| 32 | + { name: "label1" }, |
| 33 | + { name: "label2" }, |
| 34 | + { name: "label3" }, |
| 35 | + { name: "label4" }, |
| 36 | + { name: "label5" }, |
| 37 | + { name: "label6" }, |
| 38 | + ]; |
| 39 | + const { roulette, onStart, onStop, result } = useRoulette({ items: data }); |
| 40 | + |
| 41 | + return ( |
| 42 | + <div> |
| 43 | + <Roulette roulette={roulette} /> |
| 44 | + <button onClick={onStart}>Start</button> |
| 45 | + <button onClick={onStop}>Stop</button> |
| 46 | + {result && <div>Result: {result}</div>} |
| 47 | + </div> |
| 48 | + ); |
| 49 | +}; |
| 50 | +``` |
| 51 | + |
| 52 | +## API References |
| 53 | +### `RouletteItem` |
| 54 | +| Property | Type | Description | |
| 55 | +|-----------|-----------|---------------------------------------------------| |
| 56 | +| `name` | `string` | Label for the roulette segment. | |
| 57 | +| `bg` | `string?` | Background color of the roulette segment. | |
| 58 | +| `color` | `string?` | Text color for the segment label. | |
| 59 | +| `weight` | `number?` | Determines the segment's size relative to others. | |
| 60 | + |
| 61 | +If you want to set styling globally, please refer to the [StyleOption](####StyleOption) section. (If both are specified, the one specified in rouletteItem takes precedence.) |
| 62 | + |
| 63 | +### `useRoulette` Hook |
| 64 | +#### Props |
| 65 | +| Property | Type | Description | |
| 66 | +|----------|---------------------|------------------------------------------------------| |
| 67 | +| `items` | `RouletteItem[]` | Array of items to display on the roulette wheel. | |
| 68 | +| `options`| `RouletteOptions` | Optional settings to customize the roulette wheel. | |
| 69 | + |
| 70 | +#### Return Values |
| 71 | +| Property | Type | Description | |
| 72 | +|-------------|------------------|----------------------------------------| |
| 73 | +| `roulette` | `RouletteCanvas` | Contains the size of the roulette and a ref to the canvas element. | |
| 74 | +| `result` | `string` | The result after the wheel stops spinning. | |
| 75 | +| `onStart` | `() => void` | Function to start the wheel spinning. | |
| 76 | +| `onStop` | `() => void` | Function to stop the wheel spinning. | |
| 77 | + |
| 78 | +#### Options |
| 79 | +| Property | Type | Default Value | Description | |
| 80 | +|---------------------|----------------------|---------------|--------------------------------------------------| |
| 81 | +| `size` | `number` | `400` | Diameter of the roulette wheel. | |
| 82 | +| `initialAngle` | `number` | `0` | Starting angle of the wheel. | |
| 83 | +| `rotationDirection` | `RotationDirection` | `"clockwise"` | Rotation direction. | |
| 84 | +| `maxSpeed` | `number` | `100` | Maximum rotation speed. | |
| 85 | +| `acceleration` | `number` | `1` | Acceleration rate until reaching max speed. | |
| 86 | +| `deceleration` | `number` | `1` | Deceleration rate after stopping. | |
| 87 | +| `determineAngle` | `number` | `75` | Angle for determining the selected item. | |
| 88 | +| `showArrow` | `boolean` | `true` | Controls visibility of the selection arrow. | |
| 89 | +| `style` | `StyleOption` | | Customize roulette stylings. | |
| 90 | + |
| 91 | +#### StyleOption |
| 92 | +##### CanvasStyle |
| 93 | +| Property | Type | Description | |
| 94 | +|-----------------|---------------------|---------------------------------------------------| |
| 95 | +| `bg` | `string` | Background color of the canvas. | |
| 96 | + |
| 97 | +##### PieStyle |
| 98 | +| Property | Type | Description | |
| 99 | +|-----------------|---------------------|---------------------------------------------------| |
| 100 | +| `theme` | `PieTheme[]` | Array of theme options for the pie segments. | |
| 101 | + |
| 102 | +##### LabelStyle |
| 103 | +| Property | Type | Description | |
| 104 | +|-----------------|---------------------|---------------------------------------------------| |
| 105 | +| `font` | `string` | Font style and size for the label text. | |
| 106 | +| `defaultColor` | `string` | Default text color for the label. | |
| 107 | +| `align` | `CanvasTextAlign` | Horizontal alignment of the label text. | |
| 108 | +| `baseline` | `CanvasTextBaseline`| Vertical alignment of the label text. | |
| 109 | +| `offset` | `number` | Position offset of the label from the center. | |
| 110 | + |
| 111 | +##### ArrowStyle |
| 112 | +| Property | Type | Description | |
| 113 | +|-----------------|---------------------|---------------------------------------------------| |
| 114 | +| `bg` | `string` | Background color of the arrow. | |
| 115 | +| `size` | `number` | Size of the arrow. | |
| 116 | + |
| 117 | +#### Default config |
| 118 | +```ts |
| 119 | +const option = { |
| 120 | + size: 400, |
| 121 | + maxSpeed: 100, |
| 122 | + rotationDirection: "clockwise", |
| 123 | + acceleration: 1, |
| 124 | + deceleration: 1, |
| 125 | + initialAngle: 0, |
| 126 | + determineAngle: 75, |
| 127 | + showArrow: true, |
| 128 | + style: { |
| 129 | + canvas: { |
| 130 | + bg: "#fff", |
| 131 | + }, |
| 132 | + arrow: { |
| 133 | + bg: "#000", |
| 134 | + size: 16, |
| 135 | + }, |
| 136 | + label: { |
| 137 | + font: "16px Arial", |
| 138 | + align: "right", |
| 139 | + baseline: "middle", |
| 140 | + offset: 0.75, |
| 141 | + defaultColor: "#000", |
| 142 | + }, |
| 143 | + pie: { |
| 144 | + theme: [ |
| 145 | + { |
| 146 | + bg: "#e0e7ff", |
| 147 | + }, |
| 148 | + { |
| 149 | + bg: "#a5b4fc", |
| 150 | + }, |
| 151 | + { |
| 152 | + bg: "#6366f1", |
| 153 | + color: "#fff", |
| 154 | + }, |
| 155 | + { |
| 156 | + bg: "#4338ca", |
| 157 | + color: "#fff", |
| 158 | + }, |
| 159 | + ], |
| 160 | + }, |
| 161 | + }, |
| 162 | +} |
| 163 | +``` |
| 164 | + |
| 165 | +### License |
| 166 | +MIT |
0 commit comments