@logclip/react

The React adapter for the LogClip capture SDK. One provider at the root of your app starts recording, and a hook gives any component the client.

It exists for one reason that is easy to get wrong by hand: identity usually arrives late. A session starts the moment the page loads, but you do not know who the user is until the auth call comes back. Pass userId as a prop and the provider calls identify() for you the moment it resolves, which retro-stamps the session that is already in flight — the recording from before login belongs to the right person.

Install

npm install @logclip/react @logclip/tracker

Use

import { LogClipProvider } from '@logclip/react';

export function App({ user }) {
  return (
    <LogClipProvider
      siteKey="pk_live_xxx"
      endpoint="https://in.yourapp.com"
      userId={user?.id}                      // may be undefined on first render
      metadata={{ plan: user?.plan }}
    >
      <Routes />
    </LogClipProvider>
  );
}

Anywhere below it:

import { useLogClip } from '@logclip/react';

function Checkout() {
  const logclip = useLogClip();

  return (
    <button onClick={() => {
      logclip.track('checkout_started', { cart: 3 });
      logclip.conversion('checkout');
    }}>
      Pay
    </button>
  );
}

Props

LogClipProvider takes every option LogClip.init() takes — siteKey, endpoint, maskAllInputs, requireConsent, sampleRate and the rest, all documented in @logclip/tracker — plus two that it manages for you:

| Prop | Notes | |---|---| | userId | Your own user id. Applied via identify() on mount and again whenever it changes, so late login and account switching both work. | | metadata | Searchable session properties. Re-merged via setMetadata() whenever the object changes. |

What the hook returns

The LogClip client itself, so everything the SDK can do is available:

identify(userId, traits?)   setMetadata(props)   reset()
track(name, props?)         conversion(name, props?)   tag(...names)
startTask(name) / endTask(name)
setConsent(granted)         startRecording() / stopRecording()
flush()                     stop()
sessionId

Call reset() on logout. It forgets the identity and starts a fresh anonymous session rather than attributing the next visitor to the last one.

Notes

• Safe to mount twice. init() is idempotent, so React 18 StrictMode's double-mount does not start two recorders, and a provider added to a page that already boots the tracker from a script tag defers to the one already running.
• Consent. With requireConsent, nothing leaves the page until you call setConsent(true) from the hook.
• Older names. ObsrviqProvider and useObsrviq are exported as aliases and are not going away, so existing apps keep compiling. New code should use the LogClip names.
• React Native is a separate package: @logclip/react-native.

MIT licensed.