# @spark-web/analytics

> --- title: Analytics isExperimentalPackage: true ---

Latest version **5.1.0** (published 2026-01-15) · 0 weekly downloads

## Install

```sh
npm install @spark-web/analytics
pnpm add @spark-web/analytics
yarn add @spark-web/analytics
bun add @spark-web/analytics
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.1.0 |
| Published | 2026-01-15 |
| First published | 2022-04-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 2 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | brighte, brighte-release-bot |

## Links

- npm: https://www.npmjs.com/package/@spark-web/analytics
- Repository: https://github.com/brighte-labs/spark-web
- Homepage: https://github.com/brighte-labs/spark-web#readme
- Issues: https://github.com/brighte-labs/spark-web/issues
- npm.io page: https://npm.io/package/@spark-web/analytics

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.25.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0

## Recent versions

- 5.1.0 (latest) — 2026-01-15
- 5.1.0-rc.0 (rc) — 2025-07-24
- 0.0.0-snapshot-release-20220907053343 (snapshot-release) — 2022-09-07
- 5.0.0 — 2025-02-10
- 5.0.0-rc.31 — 2025-02-10
- 5.0.0-rc.29 — 2025-02-06
- 5.0.0-rc.28 — 2025-02-06
- 5.0.0-rc.27 — 2025-02-05
- 5.0.0-rc.26 — 2025-02-05
- 5.0.0-rc.25 — 2025-01-31
- 5.0.0-rc.24 — 2025-01-20
- 2.0.0-rc.21 — 2025-01-07
- 2.0.0-rc.20 — 2025-01-07
- 2.0.0-rc.19 — 2024-12-12
- 2.0.0-rc.18 — 2024-12-12
- … 31 more at https://npm.io/package/@spark-web/analytics/versions

## README

---
title: Analytics
isExperimentalPackage: true
---

Set of unopinionated, lightweight React components for implementing analytics
tracking with composable event contexts.

## AnalyticsListener

To use Analytics please wrap your app with at least one `AnalyticsListener`,
which allows you to provide a callback for tracking events.

For example:

```jsx
// hypothetical analytics backend
import analyticsClient from './utils/analytics';

export function App({ Component, pageProps }) {
  // Here is where we handle events
  const handleAnalyticsEvent = (eventName, eventData) => {
    console.log(`Received event ${eventName}`);
    analyticsClient.sendEvent(eventName, eventData);
  };

  return (
    <AnalyticsListener onEvent={handleAnalyticsEvent}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </AnalyticsListener>
  );
}
```

It's possible to nest and stack multiple listeners, which will be invoked
independently whenever an event is fired, i.e.:

```jsx
<AnalyticsListener onEvent={sendToLegacyBackend}>
  <AnalyticsListener onEvent={sendToNewBackend}>
    <Layout>
      <Component {...pageProps} />
    </Layout>
  </AnalyticsListener>
</AnalyticsListener>
```

### Props

<PropsTable displayName="AnalyticsListener" />

## AnalyticsContext

`AnalyticsContext` allows transient, universal analytics properties that will be
automatically appended to all fired events. This is useful to reduce duplication
and automatically include global properties such as configuration or
environment.

```jsx
<AnalyticsListener onEvent={sendToAnalyticsBackend}>
  <AnalyticsContext data={{ browser: navigator, isLoggedIn }}>
    <Layout>
      <Component {...pageProps} />
    </Layout>
  </AnalyticsContext>
</AnalyticsListener>
```

Context can be nested to append additional data inside the component structure.

```jsx
<AnalyticsListener onEvent={sendToAnalyticsBackend}>
  <AnalyticsContext data={{ browser: navigator, isLoggedIn }}>
    <Header>
      <AnalyticsContext data={{ usingNavbar: 'main-navbar' }}>
        <Navbar id="main-navbar">
          <Button>Option 1</Button>
          <Button>Option 2</Button>
        </Navbar>
      </AnalyticsContext>
    </Header>
    <MainContent />
    <Footer>
      <AnalyticsContext data={{ usingNavbar: 'footer-navbar' }}>
        <Navbar id="footer-navbar">
          <Button>Option 1</Button>
          <Button>Option 2</Button>
        </Navbar>
      </AnalyticsContext>
    </Footer>
  </AnalyticsListener>
</AnalyticsListener>
```

## useAnalytics hook

`useAnalytics` provides a function to fire events from custom components.

Example usage:

```jsx
function ExpandingContainer({ children, id }) {
  const { expanded, setExpanded } = useState(false);
  const { trackEvent } = useAnalytics();

  const onClick = useCallback(() => {
    setExpanded(previousState => {
      const nextState = !previousState;
      const eventName = nextState
        ? 'container-expanded'
        : 'container-collapsed';

      trackEvent(eventName, { containerId: id });

      return nextState;
    });
  }, [id]);

  return (
    <>
      <button onClick={onClick}>
        {expanded ? 'Collapse' : 'Expand'} container
      </button>
      <Container>{expanded ? children : null}</Container>
    </>
  );
}
```

---
_Source: https://npm.io/package/@spark-web/analytics · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._