npm package: @prismai/record-api
Description: Public API package for Prism recording. This package exposes a clean, stable API surface for integrating Prism recording into React applications.
Latest version: 0.1.3

# @prism/record-api

Public API package for Prism recording. This package exposes a clean, stable API surface for integrating Prism recording into React applications.

## Basic Usage

```tsx
import { PrismProvider, usePrismRecorder } from "@prism/record-api";

// In your app
function App() {
  return (
    <PrismProvider
      config={{
        projectId: "your-project-id",
        apiKey: "your-api-key",
      }}
    >
      <YourApp />
    </PrismProvider>
  );
}

// In your components
function RecordingControls() {
  const { stopRecording, isRecording, updateVisitorInfo } = usePrismRecorder();

  return (
    <div>
      {isRecording ? (
        <button onClick={stopRecording}>Stop Recording</button>
      ) : (
        <div>Recording stopped</div>
      )}

      <button
        onClick={() =>
          updateVisitorInfo({
            email: "user@example.com",
            name: "Example User",
          })
        }
      >
        Set User Info
      </button>
    </div>
  );
}
```

## Framework Adapters

### Next.js Page Router

For Next.js applications using the traditional Pages Router:

```tsx
import { PrismProvider, PrismPageRouterProvider } from "@prism/record-api";

function App({ Component, pageProps }) {
  return (
    <PrismProvider config={{ projectId: "your-project-id", apiKey: "your-api-key" }}>
      <PrismPageRouterProvider>
        <Component {...pageProps} />
      </PrismPageRouterProvider>
    </PrismProvider>
  );
}
```

### Next.js App Router

For Next.js applications using the App Router:

```tsx
import { PrismProvider, AppRouterAdapter } from "@prism/record-api";

function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <PrismProvider config={{ projectId: "your-project-id", apiKey: "your-api-key" }}>
          <AppRouterAdapter>
            {children}
          </AppRouterAdapter>
        </PrismProvider>
      </body>
    </html>
  );
}
```

### React Router

For applications using React Router (v5 or v6):

```tsx
import { PrismProvider, ReactRouterAdapter } from "@prism/record-api";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <PrismProvider config={{ projectId: "your-project-id", apiKey: "your-api-key" }}>
        <ReactRouterAdapter>
          <YourRoutes />
        </ReactRouterAdapter>
      </PrismProvider>
    </BrowserRouter>
  );
}
```

### Generic SPA

For any other single-page application framework:

```tsx
import { PrismProvider, GenericSPAAdapter } from "@prism/record-api";

function App() {
  return (
    <PrismProvider config={{ projectId: "your-project-id", apiKey: "your-api-key" }}>
      <GenericSPAAdapter>
        <YourApp />
      </GenericSPAAdapter>
    </PrismProvider>
  );
}
```

## API Reference

This package includes:

### Components
- `PrismProvider` - The main provider that initializes the recording
- `PrismErrorBoundary` - Error boundary to prevent recorder issues from affecting your app

### Adapters
- `PrismPageRouterProvider` - For Next.js Pages Router apps
- `AppRouterAdapter` - For Next.js App Router apps
- `ReactRouterAdapter` - For apps using React Router
- `GenericSPAAdapter` - For other single-page applications

### Hooks
- `usePrismRecorder` - Main hook to control recording and update user info
- `usePageRouterRecorder` - For advanced Page Router integration

### Types
- `PrismConfig` - Configuration options for the recorder
- `PrismSession` - Recording session information
- `VisitorInfo` - User/visitor identification information
- `PrismRecorderHook` - Type for the object returned by usePrismRecorder

### Enums
- `PrismEnvironment` - Environment options (PRODUCTION, STAGING, LOCAL)