Add Fivepixels to your React app

Install Fivepixels, check that it appears, then choose where to save feedback.

01 / INSTALL

Install and add Fivepixels

bash

npm install @fivepixels-js/react react react-dom

Add FivePixels once near the root of App.tsx. In Next.js, place it in a small Client Component and render that component from app/layout.tsx.

tsx

import { FivePixels } from "@fivepixels-js/react";
<FivePixels project={{ id: "my-app" }} />

You should now see the Fivepixels button in a corner of the screen. No CSS import is needed.

Choose where to save feedback

Pick the option that fits how you work today. You can change it later.

Safe setup for staging

tsx

<FivePixels  project={{ id: "my-app", env: "stage", version: "1.2.0" }}  visibility={{ enabled: true, devOnly: true }}  ui={{ appearance: "system", locale: "en" }}/>

devOnly: true hides Fivepixels in production builds. Turn it off if your staging site is built in production mode.

Connect your API

Only use this step when feedback must be shared across browsers. A FivePixelsAdapter connects Fivepixels to your backend.

tsx

import { useMemo } from "react";import { FivePixels, type FivePixelsAdapter } from "@fivepixels-js/react";
function createAdapter(): FivePixelsAdapter {  const base = "/api/v1/fivepixels/projects/my-app";  return {    markers: {      list: ({ pathname }) =>        fetch(base + "/feedbacks/markers?pathname=" + encodeURIComponent(pathname)).then((r) => r.json()),    },    feedback: {      create: (payload) => fetch(base + "/feedbacks", {        method: "POST", body: JSON.stringify(payload),      }).then((r) => r.json()),      update: (id, payload) => fetch(base + "/feedbacks/" + id, {        method: "PATCH", body: JSON.stringify(payload),      }).then((r) => r.json()),    },  };}
const adapter = useMemo(() => createAdapter(), []);<FivePixels sync="api" adapter={adapter} project={{ id: "my-app", env: "stage" }} />

Create the Adapter once with useMemo or outside the component. Creating it again on every render can repeat requests.