React Quickstart

Add license-gated features to your React or Next.js application.

5 minute setup

$ npm install @traffic-orchestrator/client

Install the SDK

The same Node.js SDK works in React, Next.js, Remix, and any JavaScript framework.

bash

npm install @traffic-orchestrator/client

Create a License Provider

Wrap your app with a context provider that manages license state. Validation should happen server-side or via an API route to protect your API key.

tsx

// LicenseContext.tsx
import { createContext, useContext, useState, useEffect } from 'react'

const LicenseContext = createContext({ valid: false, features: [] })

export const LicenseProvider = ({ licenseKey, children }) => {
  const [license, setLicense] = useState({ valid: false, features: [] })

  useEffect(() => {
    // Call YOUR backend — never expose API keys client-side
    fetch('/api/validate-license', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ key: licenseKey })
    })
      .then(r => r.json())
      .then(setLicense)
  }, [licenseKey])

  return <LicenseContext.Provider value={license}>{children}</LicenseContext.Provider>
}

export const useLicense = () => useContext(LicenseContext)

Gate Premium Features

Use the useLicense hook to conditionally render premium content.

tsx

// PremiumFeature.tsx
import { useLicense } from './LicenseContext'

export const PremiumDashboard = () => {
  const { valid, features } = useLicense()

  if (!valid) {
    return (
      <div className="upgrade-prompt">
        <h2>Upgrade to Pro</h2>
        <p>Unlock advanced analytics and custom branding.</p>
        <a href="/pricing">View Plans</a>
      </div>
    )
  }

  return (
    <div>
      <h2>Pro Dashboard</h2>
      {features.includes('analytics') && <AnalyticsPanel />}
      {features.includes('branding') && <BrandingEditor />}
    </div>
  )
}

Backend API Route (Next.js)

Create a server-side API route that validates licenses. This keeps your API key secret.

typescript

// pages/api/validate-license.ts (Next.js)
import { TrafficOrchestrator } from '@traffic-orchestrator/client'

const client = new TrafficOrchestrator({
  baseUrl: 'https://api.trafficorchestrator.com/api/v1',
  apiKey: process.env.TO_API_KEY  // server-only
})

export default async (req, res) => {
  const { key } = req.body
  const result = await client.validate({
    key,
    domain: req.headers.host
  })
  res.json(result)
}

Wrap Your App

Add the LicenseProvider at the top of your app tree.

tsx

// App.tsx
import { LicenseProvider } from './LicenseContext'

const App = () => (
  <LicenseProvider licenseKey={userLicenseKey}>
    <Router>
      <Route path="/" element={<Home />} />
      <Route path="/dashboard" element={<PremiumDashboard />} />
    </Router>
  </LicenseProvider>
)

Next Steps

Full API Reference SDK Documentation All SDKs & Resources Guides & Tutorials