2kB gzipped

Demo

➤ Install

$ yarn add wheel-fortune

➤ Import

import WheelFortune from 'wheel-fortune';

➤ Usage

const wheelFortune = new WheelFortune({
  rootSelector: '.wheel-container',
  wheelSelector: '.wheel',
  triggerSelector: '.spin-button',
  spinStates: [
    {
      targetAngle: 90,
      callback: () => console.log('Landed on 90°!'),
    },
    {
      targetAngle: 225,
      callback: () => console.log('Landed on 225°!'),
    },
  ],
});

wheelFortune.init();

➤ Options

| Option | Type | Default | Description | |:------------------|:-------------:|:-------:|:------------------------------------------------------------------------------------------| | rootSelector | string | – | Selector for the root container element. | | wheelSelector | string | – | Selector for the rotating wheel element. | | triggerSelector | string | – | Selector for the spin trigger element (button, div, etc.). | | rotationCount | number | 6 | Number of full rotations before landing on the final target angle. | | duration | number | 5000 | Main spin duration in milliseconds. | | overshootDeg | number | 15 | Overshoot angle in degrees before settling on the target. | | returnDuration | number | 1350 | Duration of the settle-back phase after overshoot. | | swayOptions | SwayOptions | – | Optional idle sway config: { amplitude?: number; period?: number }. | | spinStates | SpinState[] | [] | Array of spin results in sequence. Each includes targetAngle and optional callback. |

➤ API

| Method | Description | |:------------|:-------------------------------------------| | init() | Initializes the wheel and event listeners. | | destroy() | Cleans up animations and event listeners. | | reset() | Resets the wheel to initial state. |

➤ CSS States

The root element receives CSS class modifiers during runtime:

• .{rootClassName}--spinning — while the wheel is spinning.
• .{rootClassName}--completed — after spin is complete.
• .{rootClassName}--first-done — after the first spin.
• .{rootClassName}--final-done — after the final defined spin state.

You can use these classes to style the component based on its state.

➤ License

MIT