Framework SDK
React & Vite SDK (`parityedge/react`)
Type-safe React integration, headless hook (useParityEdge), and zero-layout-shift Shadow DOM banner components compatible with **React 16.8, 17, 18, and 19**, **Vite**, **Create React App (CRA)**, and **Remix**.
Universal React Compatibility
React 16.8+ • React 17 • React 18 • React 19 • Vite • CRA • Remix
1. Installation
Install either the zero-dependency unified SDK or the dedicated React package:
# Option A: Standard Unified Client SDK (Recommended)
npm install parityedge
# Option B: Dedicated React Package
npm install @parityedge/react2. Drop-in Banner Component (0 CLS)
Render a host-isolated Shadow DOM banner with automatic visitor currency & discount display. Compatible with Vite, CRA, and React 16.8+:
import { ParityBanner } from 'parityedge/react';
export default function PricingPage() {
return (
<div className="min-h-screen bg-slate-950 text-white">
{/* Isolated Shadow DOM Banner (0 CLS) */}
<ParityBanner
projectId="prj_live_YOUR_PROJECT_ID"
theme="dark" // 'dark' | 'light' | 'glassmorphic'
position="bottom-pill" // 'bottom-pill' | 'top-bar' | 'modal'
/>
<PricingContent />
</div>
);
}3. Use the Headless `useParityEdge()` Hook
For custom UI designs, access resolved parity discounts, flags, coupon codes, and VPN status directly:
import { useParityEdge } from 'parityedge/react';
export function PricingCard({ basePrice = 49 }: { basePrice?: number }) {
const { data, loading, error } = useParityEdge({
projectId: 'prj_live_YOUR_PROJECT_ID',
showBanner: false, // Set to true to automatically mount the banner
});
if (loading) {
return <div className="text-slate-400 text-xs">Resolving localized parity discount...</div>;
}
const finalPrice = data?.eligible
? basePrice * (1 - data.discountPercentage / 100)
: basePrice;
return (
<div className="p-6 rounded-2xl bg-slate-900 border border-slate-800">
<h3 className="text-xl font-bold">Pro Tier</h3>
<p className="text-3xl font-extrabold mt-2 font-mono">
${finalPrice.toFixed(2)} USD
</p>
{data?.eligible && (
<div className="mt-3 inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-semibold">
<span>{data.flag}</span>
<span>{data.discountPercentage}% OFF applied for {data.countryName}! Use code: <strong>{data.couponCode}</strong></span>
</div>
)}
</div>
);
}4. Pure React 16.8+ `useEffect` Hook (Zero Dependencies)
If you prefer zero npm dependencies in legacy Single Page Apps (CRA / Webpack), query the Cloudflare Edge API with a standard React effect:
import React, { useState, useEffect } from 'react';
export function useLegacyParity(projectId) {
const [parity, setParity] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(`https://parityedge-edge-api.g-saichakri.workers.dev/v1/resolve?projectId=${projectId}`)
.then((res) => res.json())
.then((data) => {
setParity(data);
setLoading(false);
})
.catch(() => setLoading(false));
}, [projectId]);
return { parity, loading };
}