React comments SDK

Production-ready React + TypeScript comments system by GoodVibesLab.

Installation

npm install @goodvibeslab/gvl-comments-react

yarn add @goodvibeslab/gvl-comments-react

Quick start

Wrap your application with CommentsProvider and drop a CommentsThread where needed.

import {
  CommentsProvider,
  CommentsThread,
} from "@goodvibeslab/gvl-comments-react";

<CommentsProvider
  config={{
    installKey: "cmt_live_xxx",
    externalUserId: "user_123",
    externalUserName: "Joris",
    avatarUrl: "https://gravatar.com/avatar/…",
  }}
>
  <CommentsThread threadKey="post:550e8400-e29b-41d4-a716-446655440000" />
</CommentsProvider>;

Core concepts

CommentsProvider

Initializes the SDK and exposes the authenticated client, current user, plan & branding logic, and default thread configuration.

interface CommentsProviderConfig {
  installKey: string;       // cmt_live_… from the dashboard
  externalUserId: string;   // stable id of the signed-in user in your app
  externalUserName?: string;
  avatarUrl?: string;
}

CommentsThread

High-level, ready-to-use UI component for displaying and posting comments.

<CommentsThread
  threadKey="post:550e8400-e29b-41d4-a716-446655440000"
  order="oldest_first"   // default; or "newest_first"
  theme="dark"           // "light" | "dark"
  className="my-comments"
/>

Thread keys

A thread key identifies one conversation (a post, a product, a page). It must be at least 20 characters and hard to guess: use the UUID or database id of the item it belongs to. Short or sequential keys like post:123 are rejected by the SDK.

Moderation behavior

Reported comments → soft-hidden placeholder
Rejected comments → hard moderation message
Pending comments → reduced opacity (optimistic state)