Kommentare zu Ihrer React-App hinzufügen
Dies ist die offizielle React-Bibliothek für FastComments.
Betten Sie Echtzeit-Kommentare, Chat- und Review-Widgets in Ihre React-App ein.
Repository
KI-Programmieragenten 
Geben Sie Ihrem Coding‑Agent den FastComments‑Kontext, den er benötigt – Widgets, Konfiguration, Secure SSO, die REST‑API und die SDKs:
npx skills add fastcomments/skillsFunktioniert mit Claude Code, Codex, Cursor, Copilot, Gemini und jedem anderen Agenten, den das skills CLI unterstützt.
Live-Demo
Probieren Sie jedes Widget live aus unter https://fastcomments.com/commenting-system-for-react/.
Installation
NPM
npm install --save fastcomments-reactYarn
yarn add fastcomments-reactLive-Präsentation
Um jedes Widget und jeden Flow lokal gegen den öffentlichen demo-Mandanten zu sehen, klonen Sie das Repository und führen Sie aus:
npm install
npm run build
cd examples/example-showcase
npm install
npm run devDie Beispiele verlinken die Bibliothek über file:../.., sodass der Root‑Befehl npm run build einmal ausgeführt werden muss, um dist/ zu erzeugen.
Jedes Widget/Flow hat seine eigene Ansicht unter examples/example-showcase/src/views/, die Sie direkt in Ihre eigene React‑App kopieren können.
Beispiele
Einzelne Anwendungsfälle (Dark Mode, Pagination usw.) befinden sich in eigenen Ordnern unter examples/. Jeder kann mit npm install eingerichtet und mit npm run dev (Vite) gestartet werden.
Verwendung
Die Haupt-Widget-Komponente
Die FastCommentsCommentWidget-Komponente enthält das Live-FastComments-Kommentar-Widget.
Ersetzen Sie unten "demo" durch Ihre "tenantId" – verfügbar hier im FastComments-Adminbereich.
Das Widget unterstützt viele Optionen – siehe FastCommentsCommentWidgetConfig in src/index.tsx.
import React, { Component } from 'react'
import {FastCommentsCommentWidget} from 'fastcomments-react'
class Example extends Component {
render() {
return <FastCommentsCommentWidget tenantId="demo" />
}
}Aktualisieren der aktuellen Seite (für SPAs)
Um die Seite/den Artikel zu aktualisieren, mit dem der Kommentar-Thread verknüpft ist, müssen Sie die Konfigurationsparameter "urlId" und "url" aktualisieren. Sehen Sie sich das Beispiel und die Erklärung hier an.
Konto-Region (ACHTUNG: EU-Kunden)
Wenn Sie in der EU sind, müssen Sie den Client-Widgets mitteilen, in welcher Region Sie sich befinden. Siehe examples/example-eu;
Andernfalls müssen Sie region nicht definieren.
Das Kommentaranzahl-Widget
Die FastCommentsCommentCountWidget-Komponente enthält das Live-FastComments-Kommentaranzahl-Widget.
Ersetzen Sie unten "demo" durch Ihre "tenantId" – verfügbar hier im FastComments-Adminbereich.
Die unterstützten Konfigurationsoptionen finden Sie in FastCommentsCommentCountConfig in src/index.tsx.
import React, { Component } from 'react'
import {FastCommentsCommentCountWidget} from 'fastcomments-react'
class Example extends Component {
render() {
return <FastCommentsCommentCountWidget tenantId="demo" urlId="https://example.com/some-page-or-id" />
}
}Native
Eine vollständig native Implementierung von FastComments finden Sie unter fastcomments-react-native-sdk.
Einen React-Native-Wrapper dieser Bibliothek, der ein Webview verwendet, finden Sie unter fastcomments-react-native.
Wartungsstatus
Diese Komponenten sind Wrapper um unsere Kern-VanillaJS-Komponenten. Wir können diese Komponenten automatisch aktualisieren (Fehler beheben, Funktionen hinzufügen), ohne diese Bibliothek zu veröffentlichen, daher bedeutet es, dass sie vielleicht eine Weile nicht veröffentlicht wird, nicht, dass FastComments nicht aktiv weiterentwickelt wird! Schau gern in unseren Blog für Updates. Breaking-API-Änderungen oder Funktionen werden niemals in die zugrunde liegende Kernbibliothek ausgeliefert, ohne dass diese Bibliothek eine neue Version erhält.
Benötigen Sie Hilfe?
Wenn Sie auf Probleme stoßen oder Fragen zur React-Bibliothek haben, bitte:
Mitwirken
Beiträge sind willkommen! Bitte besuchen Sie das GitHub-Repository für Beitragsrichtlinien.