Docs
Installation

Install Visitors on React

For React applications, you can add Visitors analytics in several ways depending on your setup.

Replace YOUR_TOKEN with your project token.

Simplest approach

The simplest approach is to add the script tag directly to your public/index.html file.

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
    <script 
      src="https://cdn.visitors.now/v.js" 
      data-token="YOUR_TOKEN">
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Using React Helmet

If you're using React Helmet for managing document head, you can add the script there:

App.tsx
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div>
      <Helmet>
        <script 
          src="https://cdn.visitors.now/v.js" 
          data-token="YOUR_TOKEN">
        </script>
      </Helmet>
    </div>
  );
}

Dynamic loading

For more control, you can load the script dynamically:

App.tsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.visitors.now/v.js';
    script.setAttribute('data-token', 'YOUR_TOKEN');
    script.async = true;
    
    document.head.appendChild(script);
    
    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    <div>
      {/* Your app content */}
    </div>
  );
}