Skip to main content
ReadMeter
Buy · $9

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+)

The installer rewrites your imports so reads go through the wrapper. In Create React App projects the wrapper goes in src/lib/, because CRA only compiles files inside src/. The result looks like this:

import { getDoc, getDocs, onSnapshot } from './lib/readmeter-firestore'
import { collection, doc, query, where } from 'firebase/firestore'

Next steps