Skip to main content
ReadMeter

React

ReadMeter works with React apps built with Create React App, Vite, or custom setups. If you use Next.js, see the Next.js guide instead.

Quick setup

From your React project folder, run:

readmeter add

The installer copies the widget and injects it into your HTML. For CRA, the script goes in public/index.html.

Manual setup

Add the script tag in your public/index.html before any Firebase scripts:

<!-- public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="/readmeter-widget.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Modular Firebase SDK (v9+)

Use the wrapper for automatic read counting:

// Before
import { getDoc, getDocs, onSnapshot } from 'firebase/firestore'

// After
import { getDoc, getDocs, onSnapshot } from './lib/readmeter-firestore'

Next steps