@tirs/react

React bindings for the Tirs Customer Care SDK. Adds console + network capture to your app so customer recordings made through Tirs care links arrive with full technical context.

What it does

• <TirsProvider> initializes the SDK once (Strict-Mode-safe, SSR-safe) and mounts the recording panel support.
• useTirs() exposes the live SDK state to your components.
• <TirsScript> (from @tirs/react/script) renders the script-tag install instead, for apps that prefer capture to start before the React bundle loads.

How to use

npm i @tirs/react

import { TirsProvider } from '@tirs/react';

export function App({ children }) {
  return (
    <TirsProvider config={{ key: 'YOUR-KEY' }}>
      {children}
    </TirsProvider>
  );
}

Your key comes from the Tirs app: Customer care → Domains & Install.

Optionally, read SDK state anywhere:

import { useTirs } from '@tirs/react';

function SupportIndicator() {
  const { status } = useTirs(); // 'dormant' | 'armed' | 'capturing' | 'finalizing'
  return status === 'capturing' ? <span>Recording in progress…</span> : null;
}

Optional configuration

<TirsProvider> takes two optional props:

| Prop | Type | What it does | | --- | --- | --- | | config | TirsInitOptions | Capture runtime options — key, redact, preroll, denyUrls, captureBodies, maxBodyBytes, debug. | | recorder | RecorderOptions | Recording panel placement — position, offset, zIndex. |

<TirsProvider
  config={{
    key: 'YOUR-KEY',
    preroll: 30_000,              // keep the 30s before recording started
    denyUrls: [/\/auth\//],       // never capture bodies for these
  }}
  recorder={{
    position: 'bottom-left',      // our chat widget owns bottom-right
  }}
>
  {children}
</TirsProvider>

Defaults are safe for production: redaction is on, pre-roll is off, and bodies are captured up to 64 KB each. Full option list and defaults are on the @tirs/core page; panel options are on the @tirs/recorder page.

useTirs() returns { status, api } — api is the runtime handle, with api.on('session-start' | 'session-stop' | 'status', cb) and api.stop().

Script-tag variant

import { TirsScript } from '@tirs/react/script';

// In your HTML head:
<TirsScript tirsKey="YOUR-KEY" />

This loads the SDK from the Tirs CDN ahead of your bundle — the earliest capture start.

| Prop | Type | Default | What it does | | --- | --- | --- | --- | | tirsKey | string | — | Your workspace key. Required. | | preroll | number (ms) | 0 | Keep a rolling window of activity from before recording starts. | | cdnBase | string | Tirs CDN v1 | Pin a specific version (e.g. …/v0.1.2) instead of auto-updating. | | integrity | { capture?, recorder? } | — | Subresource-integrity hashes. Only valid with a pinned cdnBase. | | appUrl | string | Tirs app | Override the Tirs app origin. Self-hosted deployments only. |

MIT © Tirs