> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encorekit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Integrate the Encore Web SDK in a React app with the @encorekit/web-sdk/react entry point: EncoreProvider to configure once at the root, useEncore() to present offers from components.

The SDK ships a React entry point — `@encorekit/web-sdk/react` — with an `EncoreProvider`
that calls [`configure()`](/publishers/web/sdk-reference/configure) exactly once (StrictMode-safe)
and a `useEncore()` hook that returns the SDK instance.

## Install

```bash theme={null}
npm install @encorekit/web-sdk
```

## Configure at the root

```tsx theme={null}
// 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`](/publishers/web/sdk-reference/configure)
(`apiKey`, `redemptionMode`, `logLevel`, …).

## Identify and present offers

```tsx theme={null}
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

* [Redemption Modes](/publishers/web/guides/redemption-modes) — deferred vs immediate claim flows
* [Thank-You Layout](/publishers/web/guides/thank-you-layout) — post-purchase placements
* [`show()`](/publishers/web/sdk-reference/show) — the full `ShowResult` contract