Comment on page


LogSnag client for React applications


Using npm

npm install @logsnag/react

Using yarn

yarn add @logsnag/react

Using pnpm

pnpm add @logsnag/react


First, wrap your application with the LogSnagProvider at the top level, passing in your project and token:
Set your token's scope to public in the LogSnag dashboard.
import { LogSnagProvider } from '@logsnag/react';
function App() {
return (
{/* Rest of your app */}


The useLogSnag hook can be used across your React components and provides the following methods:
  • track(options: TrackOptions): Track custom events.
  • identify(options: IdentifyOptions): Identify user traits.
  • setUserId(userId: string | null): Set the user id for the current user. If the user is not logged in, pass null.
  • clearUserId(): Clear the user id for the current user.
  • setDebug(flag: boolean = true): Set debug mode for logging.
import { useLogSnag } from '@logsnag/react';
export function Component() {
// Get the hooks
const { setUserId, track, identify } = useLogSnag();
// Set the user id when a user logs in
// Track an event
channel: "payments",
event: "New Subscription",
user_id: "user-123", // optional when set using setUserId
icon: "💰",
notify: true,
tags: {
plan: "premium",
cycle: "monthly",
trial: false
// Identify user traits (e.g., name, email, plan, etc.)
user_id: "user-123", // optional when set using setUserId
properties: {
name: "John Doe",
plan: "premium",
// Rest of your component

Tracking Events

You can also track events directly from HTML elements using data attributes:
data-event="Upgraded Plan"
data-user-id="user-123" // optional (optional when set using setUserId)
data-channel="billing" // optional (defaults to "events")
data-icon=":moneybag:" // optional
data-tag-plan="Pro" // optional
data-tag-period="Monthly" // optional
data-tag-price="9.99" // optional
Upgrade to Pro
In this example, when the button is clicked, an event named "Upgraded Plan" will be tracked with the specified tags.