Add Comment Widgets to Your React Native App
Ceci est la bibliothèque officielle React Native de FastComments.
Intégrez des widgets de commentaires en direct, de chat et d'avis dans votre application React Native.
Dépôt
Démonstration en direct 
Pour voir chaque widget et flux s'exécuter localement contre le locataire public demo, clonez le dépôt et exécutez :
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webThe showcase entry point is example/src/ShowcaseApp.tsx — a single app that exposes all widgets, themes, and flows.
The yarn web target uses react-native-web + react-native-web-webview (which renders the WebView as an iframe). Useful for quick visual smoke tests in a browser; native-only WebView APIs like injectJavaScript and onShouldStartLoadWithRequest won't fully behave on web.
Installation
npm install react-native-webview --save
npm install fastcomments-react-native --saveConsidérez le SDK natif
Cette bibliothèque utilise une webview autour de la bibliothèque VanillaJS.
FastComments prend maintenant en charge une implémentation entièrement native de notre client dans le cadre de fastcomments-react-native-sdk. Si vous souhaitez une implémentation entièrement native, vous voudrez peut-être consulter ce dépôt.
Utilisation - Widget de commentaires en direct
L'API est légèrement différente comparée à fastcomments-react. Avec la version native, nous passons un objet de configuration qui suit cette structure.
import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Votre tenant id. Peut être récupéré depuis https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // L'ID ou l'URL du fil de commentaires dans votre application.
const myAppPageUrl = 'https://example.com/external-page'; // Vous pouvez éventuellement définir une url vers une page externe
const myAppPageTitle = 'Example Title'; // ... et vous voudrez probablement un titre pour ce contenu
const [config, setConfig] = useState({
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
});
// en appelant setConfig(), on peut, par exemple, changer la page courante ou l'utilisateur actuellement connecté
// Voir example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Utilisation - Widget de chat en direct
import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';
// ...
const myTenantId = 'demo'; // Votre identifiant de locataire. Peut être récupéré depuis https://fastcomments.com/auth/my-account/api-secret
const myAppPageId = 'native-test'; // L'ID ou l'URL du fil de commentaires dans votre application.
const myAppPageUrl = 'https://example.com/external-page'; // Vous pouvez éventuellement définir une URL vers une page externe
const myAppPageTitle = 'Example Title'; // ... et vous voudrez probablement un titre pour ce contenu
const config = {
tenantId: myTenantId,
urlId: myAppPageId,
url: myAppPageUrl,
pageTitle: myAppPageTitle
};
return (
<FastCommentsLiveChatWidget config={config}/>
);Utilisation - SSO
FastComments utilise HMAC pour le SSO sécurisé. Pour l'utiliser, faites en sorte que votre backend crée l'objet SSO (propriété de configuration sso) et le transmette
au widget de commentaires.
Vous pouvez trouver des exemples pour différents backends ici : https://github.com/FastComments/fastcomments-code-examples/tree/master/sso
Dépendances de pairs
fastcomments-react-native requiert react-native-webview. Par conséquent, vous devez suivre les étapes d'installation pour react-native-webview.
Région du compte (ATTENTION : clients de l'UE)
Si votre compte est situé dans l'UE, définissez region = 'eu' dans la configuration du widget.
Sinon, vous n'avez pas à définir region.
Statut de maintenance
Ces composants sont des wrappers autour de nos composants VanillaJS de base. Nous pouvons mettre à jour automatiquement ces composants (corriger des bogues, ajouter des fonctionnalités) sans publier cette bibliothèque, donc même s'il se peut qu'elle ne soit pas publiée pendant un certain temps, cela ne signifie pas que FastComments n'est pas en développement actif ! N'hésitez pas à consulter notre blogue pour les mises à jour. Des modifications d'API incompatibles ou des fonctionnalités majeures ne seront jamais intégrées à la bibliothèque cœur sous-jacente sans incrémentation de version dans cette bibliothèque.
Besoin d'aide ?
Si vous rencontrez des problèmes ou avez des questions concernant la bibliothèque React Native, veuillez :
Contribuer
Les contributions sont les bienvenues ! Veuillez consulter le dépôt GitHub pour les directives de contribution.