@esrating/embed-react

Typed React component wrapping @esrating/embed-js. Same API surface as the JS SDK, exposed as a <ESRatingWidget /> component with proper React lifecycle handling.

Installation

npm install @esrating/embed-react

@esrating/embed-js is a regular dep of this package (auto-installed). React 17+ is a peer dep.

Quick start

import { ESRatingWidget } from '@esrating/embed-react';

function InsurancePage() {
  return (
    <ESRatingWidget
      publishableKey={process.env.NEXT_PUBLIC_ESRATING_PK}
      fetchSessionUrl={async () => {
        const res = await fetch('/api/start-insurance-session', { method: 'POST' });
        const data = await res.json();
        return data.session_url;
      }}
      onBound={(policy) => router.push(`/policy/${policy.number}`)}
      onError={(err) => toast.error(err.message)}
      style={{ minHeight: '600px' }}
    />
  );
}

The component re-mounts the underlying iframe when sessionUrl, publishableKey, view, chrome, theme, themeOverrides.primaryColor, or returnUrl change. Callback props (onBound etc.) are snapshotted via a ref so they update without remounting — no stale-closure footgun.

Imperative API

const widgetRef = useRef<ESRatingWidgetHandle>(null);

<ESRatingWidget ref={widgetRef} ... />

widgetRef.current?.reload();           // re-fetch session URL + reload iframe
widgetRef.current?.navigate('quote');  // forward-compat: postMessage to portal
widgetRef.current?.getHeight();        // current iframe height in px

Props

ESRatingWidgetProps extends MountOptions from @esrating/embed-js with React-friendly additions (className, style). All callbacks (onReady, onQuote, onBound, onPayment, onSignature, onError, onAbandoned, onEvent) are typed.

License

Apache-2.0.