Use fivepixels with React
Install Fivepixels, add it once to your React app, and mark the first parts your team wants to review.
Tip
Help me follow the Use fivepixels with React guide. Install Fivepixels, add it once to your React app, and mark the first parts your team wants to review. Start by running npm install @fivepixels-js/react react react-dom, then review the project and suggest the next steps.
Install the package
bash
npm install @fivepixels-js/react react react-domFivepixels supports React 18 and later. Its interface is isolated in Shadow DOM, so the application does not need a separate stylesheet import.
Add FivePixels once
tsx
import { FivePixels } from "@fivepixels-js/react";
export default function App() { return ( <> <FivePixels project={{ id: "my-app" }} visibility={{ devOnly: true }} /> <main>{/* Your application */}</main> </> );}Add FivePixels once near the root of the app so it can follow every page your team reviews.
Mark the first review targets
tsx
<section data-report-id="home-hero" data-report-type="group"> <button data-report-id="home-hero-cta">Get started</button></section>Use stable data-report-id values on the highest-value sections, controls, and form fields before expanding the tagging scope.
