React SDK

The @entro314labs/entro-react package provides React hooks and components for tracking analytics in any React application.

Installation

pnpm add @entro314labs/entro-react

npm install @entro314labs/entro-react

yarn add @entro314labs/entro-react

bun add @entro314labs/entro-react

Quick Start

Add Provider

Wrap your app with EntrolyticsProvider:

src/App.tsx

import { EntrolyticsProvider } from '@entro314labs/entro-react'

function App() {
  return (
    <EntrolyticsProvider
      websiteId={import.meta.env.VITE_ENTROLYTICS_WEBSITE_ID}
      host={import.meta.env.VITE_ENTROLYTICS_HOST}
      autoTrack={true}
    >
      <YourApp />
    </EntrolyticsProvider>
  )
}

Add Environment Variables

Create a .env file:

.env

VITE_ENTROLYTICS_WEBSITE_ID=your-website-id
VITE_ENTROLYTICS_HOST=https://cloud.entrolytics.click

Track Events

Use the useEntrolytics hook:

import { useEntrolytics } from '@entro314labs/entro-react'

function SignupButton() {
  const { track } = useEntrolytics()

  return (
    <button onClick={() => track('signup', { plan: 'pro' })}>
      Sign Up
    </button>
  )
}

Configuration

Same configuration as Next.js SDK:

interface EntrolyticsConfig {
  websiteId?: string;
  linkId?: string;
  pixelId?: string;
  host?: string;
  autoTrack?: boolean;
  tag?: string;
  domains?: string[];
  excludeSearch?: boolean;
  excludeHash?: boolean;
  respectDoNotTrack?: boolean;
  ignoreLocalhost?: boolean;
  beforeSend?: BeforeSendCallback;
  trackOutboundLinks?: boolean;
  proxy?: ProxyConfig | false;
  debug?: boolean;
}

Hooks

useEntrolytics

const {
  track,
  trackView,
  identify,
  trackRevenue,
  trackOutboundLink,
  setTag,
  isReady,
  isEnabled,
} = useEntrolytics();

usePageView

import { usePageView } from '@entro314labs/entro-react';

function Page() {
  usePageView(); // Auto-track on mount and route changes
}

Components

TrackEvent

import { TrackEvent } from '@entro314labs/entro-react';

<TrackEvent name="cta-click" data={{ location: 'hero' }}>
  <button>Click Me</button>
</TrackEvent>

OutboundLink

import { OutboundLink } from '@entro314labs/entro-react';

<OutboundLink href="https://example.com">
  External Link
</OutboundLink>

Framework Examples

Vite + React

src/main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { EntrolyticsProvider } from '@entro314labs/entro-react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <EntrolyticsProvider
      websiteId={import.meta.env.VITE_ENTROLYTICS_WEBSITE_ID}
    >
      <App />
    </EntrolyticsProvider>
  </StrictMode>
);

React Router

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { useEntrolytics } from '@entro314labs/entro-react';

function RouteTracker() {
  const location = useLocation();
  const { trackView } = useEntrolytics();

  useEffect(() => {
    trackView(location.pathname + location.search);
  }, [location, trackView]);

  return null;
}

// Add to your app
<RouteTracker />

Support

GitHub Issues
Email: hey@entrolytics.click

React SDK

Table of Contents