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
The Main Widget Component
Die Komponente FastCommentsCommentWidget enthält das Live-Kommentar-Widget von FastComments.
Ersetzen Sie "demo" unten 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" />
}
}Updating The Current Page (For SPAs)
Um die Seite/den Artikel zu aktualisieren, an den der Kommentar-Thread gebunden ist, müssen Sie die Konfigurationsparameter "urlId" und "url" aktualisieren. Siehe das Beispiel und die Erklärung hier.
Account Region (ATTENTION: EU Customers)
Wenn Sie in der EU sind, sollten Sie den Client-Widgets mitteilen, in welcher Region Sie sich befinden. Siehe examples/example-eu;
Andernfalls müssen Sie region nicht definieren.
The Comment Count Widget
Die Komponente FastCommentsCommentCountWidget enthält das Live-Widget zur Anzeige der Kommentaranzahl von FastComments.
Ersetzen Sie "demo" unten durch Ihre "tenantId" - verfügbar hier im FastComments-Adminbereich.
Siehe FastCommentsCommentCountConfig in src/index.tsx für die unterstützten Konfigurationsoptionen.
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
Für eine vollständig native Implementierung von FastComments siehe fastcomments-react-native-sdk.
Für einen React Native-Wrapper dieser Bibliothek, der eine Webview verwendet, siehe 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.