ReachBell for React

Install

One package, zero peer deps beyond React 18+.

npm install @reachbell/react
# or
yarn add @reachbell/react
# or
pnpm add @reachbell/react

Quick start

Wrap your tree with ReachBellProvider, then read the live state from useReachBell().

// src/main.tsx
import { ReachBellProvider } from '@reachbell/react';
import App from './App';

export default function Root() {
  return (
    <ReachBellProvider
      projectId={import.meta.env.VITE_REACHBELL_PROJECT_ID}
      promptDelay={8000}
      utm={{ source: 'app', medium: 'webpush' }}
    >
      <App />
    </ReachBellProvider>
  );
}

// src/components/SubscribeBell.tsx
import { useReachBell } from '@reachbell/react';

export function SubscribeBell() {
  const { status, subscribe, identify, track } = useReachBell();

  if (status === 'subscribed') return <span>You're in. We'll ping you.</span>;
  return (
    <button
      onClick={async () => {
        await subscribe();
        identify({ email: 'jane@acme.com', plan: 'pro' });
        track('clicked_bell', { placement: 'header' });
      }}
    >
      Enable updates
    </button>
  );
}

What you get

One package wires up segments, A/B tests, automations, and the full analytics stack — no separate SDKs to install per feature.