diff --git a/.gitignore b/.gitignore
index c6bba59..09f1ce7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -128,3 +128,6 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# OSX
+.DS_Store
diff --git a/README.md b/README.md
index 28c82db..0fb85c3 100644
--- a/README.md
+++ b/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                            |
diff --git a/package.json b/package.json
index b2a1d7d..b0241f4 100644
--- a/package.json
+++ b/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": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d23c28..8289fe0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,9 @@ devDependencies:
   '@biomejs/biome':
     specifier: ^1.4.1
     version: 1.4.1
+  typescript:
+    specifier: ^5.3.2
+    version: 5.3.2
   unbuild:
     specifier: ^2.0.0
     version: 2.0.0(typescript@5.3.2)
diff --git a/src/hooks/use-roulette.ts b/src/hooks/use-roulette.ts
index 01a496b..b7276f6 100644
--- a/src/hooks/use-roulette.ts
+++ b/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 () => {