# Overview

URL: https://supapulse.app/docs/react/overview

@supapulse/react gives React apps a provider and three hooks on top of @supapulse/core. Works with Next.js, Remix and React Router.

`@supapulse/react` is a thin layer over [`@supapulse/core`](https://supapulse.app/docs/core/overview): a provider that creates and initializes one tracker, and hooks to reach it. It's about 0.6 KB gzipped on top of core.

```bash
npm install @supapulse/core @supapulse/react
```

## Quick start [#quick-start]

```tsx
import { SupapulseProvider, useEvent } from '@supapulse/react';

const config = { apiToken: 'pub_your_token' };

export function App() {
  return (
    <SupapulseProvider config={config}>
      <SignupButton />
    </SupapulseProvider>
  );
}

function SignupButton() {
  const trackEvent = useEvent();
  return <button onClick={() => trackEvent('signup_click')}>Sign up</button>;
}
```

That's a complete setup. Pageviews, including client-side route changes, are sent by the core tracker; you don't need a hook for them.

## What's in the package [#whats-in-the-package]

| Export | What it does |
| --- | --- |
| [`<SupapulseProvider config>`](https://supapulse.app/docs/react/provider) | Creates a tracker and calls `init(config)` after the first render. |
| [`useSupapulse()`](https://supapulse.app/docs/react/hooks#usesupapulse) | Returns the tracker. Calls made before it's initialized are dropped. |
| [`useEvent()`](https://supapulse.app/docs/react/hooks#useevent) | Returns `trackEvent(name, properties?)`. |
| [`useIdentify()`](https://supapulse.app/docs/react/hooks#useidentify) | Returns `identify(customerId)`, which links the visitor to your customer ID for revenue. |
| [`usePageview(options?)`](https://supapulse.app/docs/react/hooks#usepageview) | Sends pageviews yourself, for apps that set `autoPageviews: false`. Does nothing otherwise. |
| `SupapulseContext` | The raw context: `{ supapulse, isReady, autoPageviews, error }`. |

It also re-exports the core types `SupapulseConfig`, `SupapulseCore` and `EventData`.

## Routers [#routers]

The core tracker listens to the History API, which React Router, Next.js and Remix all use, so route changes are tracked as soon as the provider is mounted. Guides:

- [Next.js](https://supapulse.app/docs/guides/nextjs)
- [Remix](https://supapulse.app/docs/guides/remix)
- [React Router](https://supapulse.app/docs/guides/react-router)

## Server rendering [#server-rendering]

The provider only initializes the tracker in an effect, so it renders on the server without touching `window`. In the Next.js App Router, wrap the provider in your own client component. See [SSR support](https://supapulse.app/docs/react/ssr).

## Next steps [#next-steps]

- [Installation](https://supapulse.app/docs/react/installation)
- [Hooks reference](https://supapulse.app/docs/react/hooks)
- [Examples](https://supapulse.app/docs/react/examples)