React Integration

<meta name="userplane:workspace" content="YOUR_WORKSPACE_ID" />
<script type="module" src="https://cdn.userplane.io/embed/script.js"></script>

// src/providers/UserplaneProvider.tsx
import { useEffect } from 'react';
import { initialize } from '@userplane/sdk';

export function UserplaneProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    initialize({
      workspaceId: import.meta.env.VITE_USERPLANE_WORKSPACE_ID,
    });
  }, []);

  return <>{children}</>;
}

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { UserplaneProvider } from './providers/UserplaneProvider';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <UserplaneProvider>
      <App />
    </UserplaneProvider>
  </StrictMode>
);

// Example: preserve params through a login redirect
const url = new URL(window.location.href);
const loginUrl = new URL('/login', window.location.origin);

for (const [key, value] of url.searchParams) {
  if (key.startsWith('userplane-')) {
    loginUrl.searchParams.set(key, value);
  }
}

window.location.href = loginUrl.toString();

import { useEffect } from 'react';
import { initialize, set } from '@userplane/sdk';

export function UserplaneProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    initialize({ workspaceId: import.meta.env.VITE_USERPLANE_WORKSPACE_ID });
    set('environment', 'production');
  }, []);

  return <>{children}</>;
}

cd examples/react && npm install && npm run dev