Merge pull request #4 from camiha/develop

fix: Determine the result outside of the useEffect lifecycle

.gitignore

@@ -128,3 +128,6 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# OSX
+.DS_Store

README.md

@@ -64,10 +64,13 @@ If you want to set styling globally, please refer to the StyleOption section. (I
 
 ### `useRoulette` Hook
 #### Props
-| Property | Type                | Description                                          |
-|----------|---------------------|------------------------------------------------------|
-| `items`  | `RouletteItem[]`    | Array of items to display on the roulette wheel.     |
-| `options`| `RouletteOptions`   | Optional settings to customize the roulette wheel.   |
+| 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. |
+| `onComplete`| `(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                            |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-roulette",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Minimal roulette wheel component. built with React Hooks.",
   "homepage": "https://github.com/camiha/React-Hook-Roulette",
   "publishConfig": {
@@ -35,6 +35,7 @@
   "license": "MIT",
   "devDependencies": {
     "@biomejs/biome": "^1.4.1",
+    "typescript": "^5.3.2",
     "unbuild": "^2.0.0"
   },
   "peerDependencies": {

src/hooks/use-roulette.ts

@@ -7,9 +7,15 @@ import { RouletteCanvas, RouletteItem } from "../types";
 
 export const useRoulette = ({
 	items,
+	onSpinUp,
+	onSpinDown,
+	onComplete,
 	options = {},
 }: {
 	items: RouletteItem[];
+	onSpinUp?: () => void;
+	onSpinDown?: () => void;
+	onComplete?: (result: string) => void;
 	options?: Partial<RouletteOptions>;
 }): {
 	roulette: RouletteCanvas;
@@ -69,7 +75,7 @@ export const useRoulette = ({
 	const onStart = useCallback(() => {
 		if (status !== "stop") return;
 		setStatus("running");
-		setResult("");
+
 	}, [status]);
 
 	const onStop = useCallback(() => {
@@ -93,6 +99,12 @@ export const useRoulette = ({
 	useEffect(() => {
 		if (status !== "running" && status !== "ending") return;
 
+		if (status === "running") {
+			onSpinUp?.();
+		}
+		if (status === "ending") {
+			onSpinDown?.();
+		}
 		const { context } = setupCanvas(canvasRef.current);
 		const cancelAnimation = animateRoulette({
 			rouletteItemList: items,
@@ -104,6 +116,7 @@ export const useRoulette = ({
 			onFinish: (rouletteResult: string) => {
 				setStatus("stop");
 				setResult(rouletteResult);
+				onComplete?.(rouletteResult);
 			},
 		});
 		return () => {