Add Comment Widgets to Your React Native App
Ceci est la bibliothèque officielle React Native pour 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 tous les widgets et flux s'exécutant localement contre le tenant public demo, clonez le repo et lancez :
yarn bootstrap
cd example
yarn ios # or: yarn android, yarn webLe point d'entrée de la showcase est example/src/ShowcaseApp.tsx — une seule application qui expose tous les widgets, thèmes et flux.
La cible yarn web utilise react-native-web + react-native-web-webview (qui rend la WebView sous forme d'iframe). Utile pour des tests rapides d'affichage visuel dans un navigateur ; les API WebView réservées au natif comme injectJavaScript et onShouldStartLoadWithRequest ne se comporteront pas entièrement sur le web.
Installation
npm install react-native-webview --save
npm install fastcomments-react-native --saveEnvisager le SDK natif
Cette bibliothèque utilise une webview autour de la bibliothèque VanillaJS.
FastComments prend désormais 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 pouvez consulter ce dépôt.
Utilisation - Le widget de commentaire en direct
L'API est légèrement différente par rapport à 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(), nous pouvons par exemple changer la page courante, ou l'utilisateur actuellement connecté
// Voir example/src/App.tsx
return (
<FastCommentsCommentWidget config={config}/>
);Utilisation - Le widget de chat en direct
import { FastCommentsLiveChatWidget } 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 = {
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 (sso propriété de configuration) 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 peer
fastcomments-react-native nécessite react-native-webview. Vous devez donc suivre les étapes d'installation de 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 besoin de définir region.
Statut de maintenance
Ces composants servent de wrappers pour nos composants VanillaJS core. Nous pouvons mettre automatiquement à jour ces composants (corriger des bugs, 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 cours de développement actif ! N'hésitez pas à consulter notre blog pour des mises à jour. Les modifications incompatibles de l'API ou les nouvelles fonctionnalités ne seront jamais intégrées à la bibliothèque core sous-jacente sans une augmentation 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.