stream chat react
v12.8.1
Les composants officiels de React pour Stream Chat, un service de création d'applications de chat.
Liens rapides
Avec notre bibliothèque de composants, vous pouvez créer une variété de cas d'utilisation de chat, notamment:
La meilleure façon de commencer est de suivre le tutoriel React Chat. Il vous montre comment utiliser ce SDK pour créer une application de chat entièrement fonctionnelle et comprend des personnalisations courantes.
Stream est gratuit pour la plupart des projets secondaires et de passe-temps. Pour se qualifier, votre projet / entreprise ne doit pas avoir plus de 5 membres de l'équipe et gagner moins de 10 000 $ de revenus mensuels. Pour des prix complets et des détails, visitez notre page de prix de chat.
npm install react react-dom stream-chat stream-chat-react
yarn add react react-dom stream-chat stream-chat-react
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat"></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat-react"></script>
Nous avons construit cinq applications de démonstration présentant une variété de cas d'utilisation de chat, notamment la messagerie sociale, la collaboration d'équipe, le support client, les jeux en direct et l'événement virtuel. Vous pouvez prévisualiser ces démos sur notre site Web. De plus, le code est open source.
Nous utilisons un générateur DOC pour construire notre documentation de composants. Nous fournissons une brève description de chaque composant de chat et définissons tous les accessoires qu'il accepte.
Les composants React sont créés à l'aide de la bibliothèque Stream-Chat-JS. Si vous personnalisez les composants, il est probable que vous devrez passer des appels supplémentaires à notre API de chat à l'aide de notre client JavaScript, qui a une documentation sur notre site Web.
À partir de la version 5.0.0 , la bibliothèque de composants a été convertie en TypeScript. Veuillez lire le guide TypeScript pour plus de détails et une aide à la mise en œuvre.
Pour les composants qui implémentent une logique significative, il est utile de diviser le composant en deux parties: un composant de niveau supérieur qui gère la fonctionnalité et un composant de niveau inférieur qui rend l'interface utilisateur. De cette façon, vous pouvez échanger l'interface utilisateur sans modifier la logique qui donne au composant sa fonctionnalité. Nous utilisons fréquemment ce modèle de fournisseur / consommateur dans la bibliothèque, et l'exemple ci-dessous montre comment échanger le composant d'interface utilisateur Message avec MessageTeam , sans affecter de logique dans l'application.
< Channel Message = { MessageTeam } >
< Window >
< ChannelHeader />
< MessageList />
< MessageInput />
</ Window >
< Thread />
</ Channel >La méthode préférée pour remplacer les styles prédéfinis dans la bibliothèque est à un processus en deux étapes. Tout d'abord, importez notre CSS groupé dans le fichier où vous instanciez votre application de chat. Deuxièmement, localisez les styles de flux que vous souhaitez remplacer à l'aide de l'inspecteur du navigateur ou en affichant le code de la bibliothèque. Vous pouvez ensuite ajouter des sélecteurs à votre fichier CSS local pour remplacer nos valeurs par défaut. Par exemple:
import 'stream-chat-react/dist/css/v2/index.css' ;
import './App.css' ; Notre bibliothèque prend en charge l'auto-traduction pour divers langages utilisateur. Veuillez lire notre documentation d'internationalisation pour plus de détails et des conseils de configuration.
Nous accueillons des modifications de code qui améliorent cette bibliothèque ou résolvons un problème. Veuillez vous assurer de suivre toutes les meilleures pratiques et d'ajouter des tests, le cas échéant, avant de soumettre une demande de traction sur GitHub. Nous sommes heureux de fusionner votre code dans le référentiel officiel s'il répond à un besoin. Assurez-vous d'abord de signer notre accord de licence de contributeur (CLA). Voir notre fichier de licence pour plus de détails.
Nous avons récemment clôturé un cycle de financement de la série B de 38 millions de dollars et nous sommes en croissance active. Nos API sont utilisées par plus d'un milliard d'utilisateurs finaux, et en travaillant chez Stream, vous avez la chance d'avoir un impact énorme sur une équipe d'ingénieurs très forts.
Consultez nos ouvertures actuelles et postulez via le site Web de Stream.
Ce projet utilise la bibliothèque lamejs sous la licence LGPL pour convertir l'audio enregistré en format MP3. Le code source de la bibliothèque est importé dynamiquement et utilisé uniquement si l'enregistrement audio est activé.
Vous pouvez obtenir le code source de lamejs à partir du référentiel lamejs qui est une fourche de la bibliothèque JS d'origine. Vous pouvez trouver le code source pour lame sur https://lame.sourceforge.net et sa licence à: https://lame.sourceforge.net/license.txt
