Framework SDK
React & Vite SDK (parityedge/react)
Type-safe React integration, headless hook (useParityEdge), and near-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 18 • React 19 • Vite • CRA • Remix
Drop-in Banner Component
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 (Near-Zero CLS) */}
<ParityBanner
projectId="prj_live_YOUR_PROJECT_ID"
theme="dark" // 'dark' | 'light' | 'glassmorphic'
position="bottom-pill" // 'bottom-pill' | 'top-bar' | 'modal'
/>
<PricingContent />
</div>
);
}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>
);
}Pure React 16.8+ Hook (Zero Dependencies)
If you prefer zero npm dependencies in legacy Single Page Apps (CRA / Webpack), query the ParityEdge 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);
const [error, setError] = useState(null);
useEffect(() => {
fetch(
`https://api.parityedge.app/v1/lookup?pid=${encodeURIComponent(projectId)}`,
{ credentials: 'omit' }
)
.then((res) => {
if (!res.ok) throw new Error(`ParityEdge: HTTP ${res.status}`);
return res.json();
})
.then((data) => {
setParity(data);
setLoading(false);
})
.catch((err) => {
console.warn('[ParityEdge] lookup failed, defaulting to base price:', err.message);
setError(err.message);
setLoading(false);
});
}, [projectId]);
return { parity, loading, error };
}