@summalytics/react
v0.1.4
Published
Privacy-first analytics SDK for React and Next.js
Downloads
363
Readme
@summalytics/react
Privacy-first analytics for React and Next.js. No cookies, no PII. Full TypeScript support.
Install
npm install @summalytics/reactSetup
Wrap your app with SummalyticsProvider:
// app/layout.tsx (Next.js App Router)
import { SummalyticsProvider } from '@summalytics/react'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<SummalyticsProvider config={{ writeKey: 'YOUR_WRITE_KEY' }}>
{children}
</SummalyticsProvider>
</body>
</html>
)
}Track pageviews (Next.js App Router)
Use useAutoPageview in a client component that receives the current pathname:
// components/analytics.tsx
'use client'
import { useAutoPageview } from '@summalytics/react'
import { usePathname, useSearchParams } from 'next/navigation'
export function Analytics() {
const pathname = usePathname()
const search = useSearchParams().toString()
useAutoPageview(pathname, search)
return null
}Then render it inside your layout (inside the provider):
<SummalyticsProvider config={{ writeKey: 'YOUR_WRITE_KEY' }}>
<Analytics />
{children}
</SummalyticsProvider>Track custom events
'use client'
import { useSummalytics } from '@summalytics/react'
export function SignupButton() {
const { track } = useSummalytics()
return (
<button onClick={() => track('signup_completed', { value: 1 })}>
Sign up
</button>
)
}API
SummalyticsProvider
| Prop | Type | Description |
|---|---|---|
| config.writeKey | string | Your project write key |
| config.endpoint | string | Optional. Defaults to https://summalytics.ai/api/ingest |
| config.autoPageview | boolean | Optional. Pass false to disable the initial pageview |
useSummalytics()
Returns { track, pageview }.
track(eventName, payload?)— fire a custom eventpageview(payload?)— fire a pageview manually
useAutoPageview(pathname?, search?)
Fires a pageview whenever pathname or search changes. Deduplicates consecutive calls to the same path.
License
MIT