react-lucky-spin

A configurable SVG lucky wheel for React. Works with plain JavaScript and TypeScript.

Install

npm install react-lucky-spin

Usage (JavaScript)

import { LuckyWheel, CircularBulbRing } from "react-lucky-spin";
import "react-lucky-spin/styles.css";

const items = [
  { id: "1", label: "Coin", backgroundColor: "#f6c945" },
  {
    id: "2",
    label: "Gift",
    backgroundColor: "#4ecdc4",
    image: { uri: "/gift.png", scale: 1.2 },
  },
  { id: "3", label: "Empty", backgroundColor: "#95a5a6" },
];

export function RewardsWheel() {
  return (
    <CircularBulbRing bulbCount={12} speed={400} onPattern={(i) => i % 2 === 0}>
      <LuckyWheel
        items={items}
        pointerImage="/arrow.png"
        button={{
          text: "SPIN",
          className: "my-spin-btn",
          onClick: async () => {
            const prize = await fetchPrize();
            // string id, { id }, or { item: { _id } } all work
            return prize.id;
          },
        }}
        afterSpinFunc={() => console.log("done")}
        onError={(err) => console.error(err)}
      />
    </CircularBulbRing>
  );
}

Usage (TypeScript)

Same API — optional types are shipped via index.d.ts:

import {
  LuckyWheel,
  type WheelItem,
  type LuckyWheelProps,
} from "react-lucky-spin";
import "react-lucky-spin/styles.css";

API

LuckyWheel

| Prop | Type | Description | |------|------|-------------| | items | WheelItem[] | Slice data (id, optional label, backgroundColor, image) | | button | WheelButton | Center button (text, onClick, optional className / style / disabled) | | afterSpinFunc | () => void | Called when the spin animation ends | | notAllowed | boolean | Run onClick but skip spinning | | pointerImage | string | Arrow image URL; CSS triangle if omitted | | onError | (error: Error) => void | Prize id not found in items | | minTurns | number | Minimum full rotations (default 6) | | maxExtraTurns | number | Extra random turns range (default 7) | | enableTouchSpin | boolean | Drag gently to nudge the wheel; flick hard to spin (default true) | | className | string | Root wrapper class |

button.onClick may return a prize id string, { id }, or { item: { _id } }.

CircularBulbRing

Optional decorative blinking bulb ring. Wrap LuckyWheel as children.

Alias

WheelConfigurable is an alias of LuckyWheel.

Publish / local link

npm run build
npm publish --access public