Skip to main content

​
Overview

This guide walks through integrating the Encore Web SDK in a React 18+ application using hooks and TypeScript.

​
Installation

npm install @encorekit/web-sdk

​
Complete Setup Example

​
Step 1: Wrap Your App with EncoreProvider

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

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <EncoreProvider apiKey={import.meta.env.VITE_ENCORE_API_KEY!}>
      <App />
    </EncoreProvider>
  </React.StrictMode>,
);

​
Step 2: Use Encore in Components

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

function App() {
  const encore = useEncore();

  const handlePresentOffer = async () => {
    const result = await encore.placement().show();

    if (result.granted) {
      console.log('Offer granted:', result.entitlement);
      // Grant access, update UI, etc.
    } else {
      console.log('Offer not granted:', result.reason);
    }
  };

  return (
    <div>
      <h1>My App</h1>
      <button onClick={handlePresentOffer}>
        Unlock Premium
      </button>
    </div>
  );
}

export default App;

​
Environment Variables

Create a .env file in your project root: 
VITE_ENCORE_API_KEY=your-api-key-here

​
React Patterns

​
Identifying Users After Login

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

function LoginHandler() {
  const encore = useEncore();

  const onLoginSuccess = (user: { id: string; email: string }) => {
    encore.identify(user.id, {
      email: user.email,
    });
  };

  // ...
}

​
Working Example

Full working example: encore-web-sdk/examples/react

​
Next Steps