Skip to main content
The SDK ships a React entry point — @encorekit/web-sdk/react — with an EncoreProvider that calls configure() exactly once (StrictMode-safe) and a useEncore() hook that returns the SDK instance.

​
Install

npm install @encorekit/web-sdk

​
Configure at the root

// main.tsx
import ReactDOM from 'react-dom/client';
import { EncoreProvider } from '@encorekit/web-sdk/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <EncoreProvider apiKey={import.meta.env.VITE_ENCORE_API_KEY}>
    <App />
  </EncoreProvider>
);
The provider takes the same props as EncoreConfig (apiKey, redemptionMode, logLevel, …).

​
Identify and present offers

import { useEncore } from '@encorekit/web-sdk/react';

function CancelButton() {
  const Encore = useEncore();

  const onCancel = async () => {
    Encore.identify(currentUser.id); // once you know the real user — see identify()

    const result = await Encore.placement('cancel_flow').show(); // never rejects
    if (result.status !== 'claimed') {
      proceedWithCancellation(); // 'dismissed' or 'unavailable' — continue your flow
    }
  };

  return <button onClick={onCancel}>Cancel subscription</button>;
}

​
Next steps