### Install Wheel of Names via NPM

Source: https://github.com/volkgames/wheel-of-names/blob/main/README.md

Install the latest version of the @volkgames/wheel-of-names package using NPM.

```bash
npm i @volkgames/wheel-of-names@latest
```

--------------------------------

### Comprehensive Wheel of Names Component Example

Source: https://github.com/volkgames/wheel-of-names/blob/main/README.md

Demonstrates advanced usage of the WheelOfNames component with various props for customization, including sounds, colors, and spin behavior. The onComplete callback logs the winner to the console.

```typescript
import WheelOfNames from "@volkgames/wheel-of-names";

const Wheel = () => {
  const handleComplete = (winner: string) => {
    console.log(`The winner is: ${winner}`);
  };

  return (
    <WheelOfNames 
      list={["Pizza", "Hamburger", "Chicken", "Meat"]}
      size={400}
      minSpins={2}
      maxSpins={6}
      fps={20}
      onComplete={handleComplete}
      colors={["#FF0000", "#00FF00", "#0000FF", "#FFFF00"]}
      fontColor="#000"
      fontFamily="Verdana"
      fontSize={24}
      backgroundColor="#EEE"
      pointerColor="#000"
      highlightColor="rgba(0,255,0,0.5)"
      tickSound="tick.mp3"
      winSound="win.mp3"
      tickPlaybackRate={3}
      winPlaybackRate={1.5}
      onClick={true}
    />
  );
};

```

--------------------------------

### Configure NPM Registry

Source: https://github.com/volkgames/wheel-of-names/blob/main/README.md

Add this configuration to your .npmrc file to specify the GitHub Packages URL for the @volkgames namespace.

```bash
@volkgames:registry=https://npm.pkg.github.com
```

--------------------------------

### Basic Usage of Wheel of Names Component

Source: https://github.com/volkgames/wheel-of-names/blob/main/README.md

Import and use the WheelOfNames component in your React application. Ensure you provide a list of at least two names.

```typescript
import WheelOfNames from "@volkgames/wheel-of-names";

const Wheel = () => {
  return (
    <WheelOfNames 
      list={[
        "Pizza",
        "Hamburger",
        "Chicken",
        "Meat"
      ]} 
    />
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.