@costeffective-feedback-hub/react

React / Next.js components for Feedback Hub: an in-app bug reporter (element picker + screenshot → ClickUp task) and an embedded, read-only BRD viewer.

Install

pnpm add @costeffective-feedback-hub/react @costeffective-feedback-hub/server

Add transpilePackages: ["@costeffective-feedback-hub/react", "@costeffective-feedback-hub/core"] to next.config.mjs — this package ships raw TS/TSX source, so Next needs to transpile it itself.

Usage

// app/feedback-mount.tsx
"use client";
import { FeedbackRoot } from "@costeffective-feedback-hub/react";

export function FeedbackMount() {
  return (
    <FeedbackRoot
      canReport
      canViewBrd
      meta={{ appVersion: "0.1.0", reporterName: "Your Tester" }}
    />
  );
}

Mount <FeedbackMount /> in app/layout.tsx. The package is SSR-safe — no dynamic import needed. You'll also need @costeffective-feedback-hub/server for the two route handlers and the predev/prebuild BRD generator script.

Full docs

See the monorepo's root README for the complete Next.js wiring guide, server handlers, and BRD workflow.