Skip to main content

React — Initialization

Install the React integration and wrap your app with the provider so all components can use Signal.

Installation

npm install @signal-js/react
@signal-js/react includes the browser SDK (@signal-js/browser). You do not need to install @signal-js/browser separately.

Provider setup

Wrap your app with SignalProvider at the root (e.g. in main.tsx or App.tsx). Pass options with your API key and project ID. The endpoint is optional and defaults to https://api.trysignal.ai/.
import { SignalProvider } from '@signal-js/react';

function App() {
  return (
    <SignalProvider
      options={{
        apiKey: 'your-api-key',
        projectId: 'your-project-id',
      }}
    >
      <YourApp />
    </SignalProvider>
  );
}

Provider props

PropTypeDefaultDescription
optionsSignalOptionsrequiredBrowser SDK config. Required: apiKey, projectId. Optional: endpoint (defaults to https://api.trysignal.ai/). See Configuration.
autoStartbooleantrueStart recording when the provider mounts
childrenReactNoderequiredYour app tree
Recording starts automatically when the provider mounts unless autoStart is false. Use hooks like useSignal() or useSignalCapture() inside any child component to capture events or identify users.

Next steps