Guaranteed best solution you will need to

React Spin Wheel Component for Rewards

Build engaging prize wheels with physics-based animations, customizable segments, and dynamic probability management for fair reward distribution

Get started

Benefits

Why use PLG OS Spin The Wheel component?

Save 100+ dev hours using this Spin The Wheel component rather than building it yourself

Set up in 2 mins with 2 lines of code

Guide users with customizable screens for a dynamic experience.

Full Customization Guaranteed

Our components will adjust according to your 100% of needs, no sacrifice in user experience.

Remote configuration

Control text and features via our no-code Spin The Wheel.

Advanced User 360

Spin The Wheel data is automatically added to the Customer 360.

Full Customer Support

Our team makes sure that we meet all your demands forever when using our component

Integration with your tools

Send data from Spin The Wheel directly to your CRM or any other tools

Faster, Smarter Onboarding

Pre-built efficiency vs. starting from scratch

With

PLG OS Spin The Wheel component

Features

Web & Mobile code out of the box

Tracking and cool charts out of the box

Maintenance and bug fixes out of the box

Change any text/data using no code PLG OS Dashboard out of the box

Adding data into customer 360 out of the box

A/B Testing, Personalization, Faster deployment and so much more out of the box

Without

PLG OS Spin The Wheel component

Features

Build everything from scratch

Work with devs, designers, product to build and maintain it

Tracking and building cool charts from the scratch

No Advanced insights & analytics

No A/B testing, personalization

Slower deployment

24/7 customer support

Installation

Simple Steps to setup the Spin The Wheel

1

Install SDK

Run npm i @questlabs/react-sdk command to install the React SDK

2

Navigate to Project

Go to plg os platform and deploy Spin The Wheel component

3

Run Installation

copy paste the generated Spin The Wheel code into your project and npm start

React setup

Add the Spin The Wheel component to a React app

The wheel ships in the @questlabs/react-sdk package as the SpinTheWheel component (version 2.3.0 on npm as of September 2026). It reads your API key and entity ID from QuestProvider, so render it inside the provider.

  1. 1. Install the React SDK

    npm install @questlabs/react-sdk

  2. 2. Render SpinTheWheel inside QuestProvider

    Import the component and the SDK stylesheet, then pass the user's Quest userId and token and your campaign ID.

    App.jsx

    import { QuestProvider, SpinTheWheel } from "@questlabs/react-sdk";
import "@questlabs/react-sdk/dist/style.css";

function App() {
  return (
    <QuestProvider apiKey="your-api-key" entityId="your-entity-id" apiType="PRODUCTION">
      <SpinTheWheel
        userId="your-user-id"
        token="your-user-token"
        campaignId="your-campaign-id"
      />
    </QuestProvider>
  );
}

export default App;

React notes

  • QuestProvider takes apiKey and entityId. apiType is "PRODUCTION" (the default) or "STAGING".
  • Optional props in the package's type definitions include maxSpins (number), rewards (an array of { title, value, image? }), wheelColors ({ primary, secondary }), claimButtonText, onSpinComplete and styleConfig.
  • Building on Next.js? The same package works there from a Client Component; see the Next.js Spin The Wheel setup.

Sources: @questlabs/react-sdk on npm · Questera React SDK docs: Leaderboard component (QuestProvider props and stylesheet import)

Learn more from our Blogs

Explore expert articles on the latest trends and tips in data

View all Blogs

What is CSAT? How to calculate it?

Read Blog

What is User Experience (UX)? Is it Still Relevant in 2024?

Read Blog

What is NPS? Your Guide to Understanding Net Promoter Score

Read Blog