React SDK

@sentriq/react wraps @sentriq/browser with a provider and a hook — it never reimplements signal collection.

Install

npm install @sentriq/react

SentriqProvider

import { SentriqProvider } from '@sentriq/react';

function App() {
  return (
    <SentriqProvider publicKey="pub_test_xxx">
      <YourApp />
    </SentriqProvider>
  );
}

Initializes the SDK client-side only, inside a useEffect — never during server rendering. Does not call track()/identify() automatically on mount; initialization and event execution are kept as two separate, explicit steps.

useSentriq()

import { useSentriq } from '@sentriq/react';

function LoginForm() {
  const { track, status, error } = useSentriq();

  async function handleSubmit() {
    if (status !== 'ready') return; // or queue the call — your choice
    const result = await track('login', { account: { id: userId } });
    // result.risk.decision
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

status is one of 'idle' | 'initializing' | 'ready' | 'error'. Calling useSentriq() outside a <SentriqProvider> throws a clear error immediately, rather than a confusing "Cannot read properties of undefined".

Server-side rendering

Safe to mount in an SSR tree (Next.js, Remix, etc.) — this component never touches window/document/navigator during render, only inside the effect that runs after mount. For Next.js specifically, see the Next.js SDK, which re-exports this unchanged from a dedicated 'use client' entry point.

Errors

Same typed errors as @sentriq/browser — re-exported unchanged from @sentriq/react.