`<LybaReview />`

@lyba/react exports the <LybaReview /> component and the detectPreview(env?) helper. Render the component once, high in your app tree, on preview builds. For a step-by-step setup, see Quickstart: Next.js App Router or Vite.

Install

bash

npm install @lyba/react

Or:

bash

pnpm add @lyba/react
yarn add @lyba/react

React 18 or React 19 must already be installed by your app. Use @lyba/react@0.1.1 or newer: 0.1.0 couldn't be imported by the Next.js App Router.

Usage

tsx

import { LybaReview } from "@lyba/react";

<LybaReview enabled={isPreview} />

The component renders null in React. When all gates pass, it mounts Lyba's overlay into a shadow root and tears it down on unmount.

Props

Prop	Type	Default	Description
`enabled`	`boolean`	auto-detected	Hard gate. Pass this explicitly and make sure it is false on production.
`preview`	`Partial<PreviewContext>`	auto-detected	Reserved/advisory preview context. The current session binding comes from the CLI-created server session.
`recording`	`false \| { blockedPaths?, redactPaths? }`	`{}`	Recorded reviews. `false` hides the Record button. See recording.

`enabled`

Pass enabled explicitly from your app. Do not rely on the package guessing your host environment unless you are experimenting locally. The important rule: the expression must be false in production.

tsx

<LybaReview enabled={process.env.NEXT_PUBLIC_VERCEL_ENV !== "production"} />

Browser code cannot read private CI environment variables at runtime. In Vite, if your host exposes VERCEL_ENV, CONTEXT or a similar deploy variable without the VITE_ prefix, expose a public build variable yourself and gate on that. See Choosing the enabled gate for a recommended expression per host.

`preview`

Reserved and advisory. The widget does not decide which commit is approved: the review session created by @lyba/cli does. See Projects, sessions and review links.

`recording`

When the project offers recorded reviews, reviewers get a Record button in the toolbar. It records the tab (or, in Safari and Firefox, the browser window), the reviewer's voice, and an optional face bubble. Recordings upload straight to Lyba's storage.

false hides the Record button.
blockedPaths pauses recording on those path prefixes, for example ["/account/verify"].
redactPaths keeps the audio but blacks out the video.
Password and card fields are always blacked out while focused.

tsx

<LybaReview
  enabled={isPreview}
  recording={{ blockedPaths: ["/account/verify"] }}
/>

If screen sharing is blocked (display-capture), the Record button doesn't appear. A blocked microphone or camera only removes that source from the recording. Recording isn't available in mobile browsers, but pins still work there. A strict Content Security Policy needs extra origins and a Permissions-Policy for recording; see Content Security Policy.

Render gates

Lyba has three gates before anything appears:

Your enabled prop — this should be true only on preview builds.
Lyba's production veto — if the package confidently detects production, it refuses to render even if enabled is accidentally true.
The review token — the overlay mounts only when the URL contains a #lyba_token=... fragment from a Lyba review link.

That means production builds should pass enabled={false}, preview builds can include the package safely, and ordinary preview visitors still see nothing because they do not have a review token.

`detectPreview(env?)`

import { detectPreview } from "@lyba/react";

const preview = detectPreview({
  NEXT_PUBLIC_VERCEL_ENV: process.env.NEXT_PUBLIC_VERCEL_ENV,
  NEXT_PUBLIC_VERCEL_URL: process.env.NEXT_PUBLIC_VERCEL_URL,
});

detectPreview recognizes Vercel, Netlify and Cloudflare Pages. Client-side environment variables must be passed in or inlined by your bundler. Private CI environment variables are not magically available in the browser.

Content Security Policy

The overlay talks to Lyba's hosted API. If your app sends a strict CSP, add https://lyba.io to connect-src:

http

Content-Security-Policy: connect-src 'self' https://lyba.io;

If this is missing, the overlay may appear but fail token validation. In the browser console you will usually see a connect-src violation for https://lyba.io/api/v1/tokens-validate. See Content Security Policy for the recorded-review additions.

Security notes

The review token lives in the URL fragment, so it is not sent to your server as part of the request URL.
The overlay sends the review token to Lyba as an X-Lyba-Token header, not as a server-visible query string.
Review links are anonymous capabilities. Treat them like client-facing review URLs.
Approval receipts are created by Lyba's backend, not by the browser package.