Install in React (Vite, CRA, SPA)

For a client-rendered React app there is nothing React-specific to do. Put the loader in the HTML shell that serves your app and the SDK handles route changes on its own.

Vite / Create React App

<!-- index.html (Vite) or public/index.html (CRA) -->
<head>
  <meta charset="UTF-8" />
  <title>My App</title>
  <script async src="https://ingest.deepsync.in/t/YOUR_PROJECT_ID.js"></script>
</head>

React Router and client-side navigation

You do not need to report route changes. The SDK patches pushState and replaceState, so React Router, TanStack Router, and Wouter navigations are all captured as page views automatically.

If you'd rather load it from a component

Some setups don't give you the HTML shell. Injecting the tag once from your root component works, as long as you guard against double-injection under React 18 StrictMode, which mounts effects twice in development.

import { useEffect } from "react";

const SRC = "https://ingest.deepsync.in/t/YOUR_PROJECT_ID.js";

export function DeepSync() {
  useEffect(() => {
    if (document.querySelector(`script[src="${SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = SRC;
    s.async = true;
    document.head.appendChild(s);
  }, []);
  return null;
}