React SDK Installation

Production-ready React + TypeScript comments system by GoodVibesLab.

Installation

npm install @goodvibeslab/gvl-comments-react

or

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={{
    apiKey: "cmt_live_xxx",
    externalUserId: "user_123",
    externalUserName: "Joris",
    avatarUrl: "https://gravatar.com/avatar/…",
    plan: "starter",
    order: "newestBottom",
  }}
>
  <CommentsThread threadKey="post:123" />
</CommentsProvider>;

Core concepts

CommentsProvider

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

interface CommentsProviderConfig {
  apiKey: string;
  externalUserId: string;
  externalUserName?: string;
  avatarUrl?: string;
  order?: "newestTop" | "newestBottom";
}

CommentsThread

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

<CommentsThread
  threadKey="post:123"
  order="newestBottom"
/>

Custom rendering

You can fully override how comments are rendered using render props.

<CommentsThread
  threadKey="post:123"
  renderComment={(comment, meta) => (
    <MyCustomBubble
      comment={comment}
      pending={meta.isPending}
      moderated={meta.isModerated}
    />
  )}
/>

Moderation behavior