@customerlog/react

The official React bindings for customer.log.

Wraps the core @customerlog/sdk with a provider, a useCustomerLog() hook, and automatic browser session tracking.

import { CustomerLogProvider, useCustomerLog } from "@customerlog/react";

// app root
<CustomerLogProvider config={{ apiKey: "cl_xxx" }}>
  <App />
</CustomerLogProvider>;

// any component
function SignupTracker() {
  const { log } = useCustomerLog();

  log({
    channel: "signups",
    title: "User signed up",
    message: "Came in via Google OAuth",
    level: "success",
    metadata: { user_id: "usr_123", source: "google" },
    notify: true,
  });
}

Install

npm install @customerlog/react @customerlog/sdk

Usage

Provider (recommended)

import { CustomerLogProvider } from "@customerlog/react";

<CustomerLogProvider config={{ apiKey: process.env.NEXT_PUBLIC_CUSTOMER_LOG_API_KEY! }}>
  {children}
</CustomerLogProvider>

Hook with a config (no provider needed)

const { log, pageView } = useCustomerLog({ apiKey: "cl_xxx" });

API

| Export | Description | |--------|-------------| | <CustomerLogProvider config /> | Provides a shared client to the tree | | useCustomerLog(config?) | Returns { log(options), pageView(path?, metadata?) } | | CustomerLog | The core client (for advanced use) | | CustomerLogError | Error class with .status |

See the core SDK docs for the full log() options table.

License

MIT