stream chat react
v12.8.1
Die offiziellen React -Komponenten für Stream Chat, einen Dienst für das Erstellen von Chat -Anwendungen.
Schnelle Links
Mit unserer Komponentenbibliothek können Sie eine Vielzahl von Chat -Anwendungsfällen erstellen, darunter:
Der beste Weg, um loszulegen, besteht darin, dem React -Chat -Tutorial zu folgen. Es zeigt Ihnen, wie Sie dieses SDK verwenden, um eine voll funktionsfähige Chat -Anwendung zu erstellen, und enthält allgemeine Anpassungen.
Stream ist für die meisten Seiten- und Hobbyprojekte kostenlos. Um sich zu qualifizieren, darf Ihr Projekt/Unternehmen nicht mehr als 5 Teammitglieder haben und weniger als 10.000 US -Dollar an monatlichen Einnahmen verdienen. Vollständige Preise und Details finden Sie auf unserer Chat -Preisseite.
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>
Wir haben fünf Demo -Anwendungen erstellt, die eine Vielzahl von Chat -Anwendungsfällen vorstellen, darunter Social Messaging, Teamzusammenarbeit, Kundenunterstützung, Livestream -Spiele und virtuelle Veranstaltung. Sie können diese Demos auf unserer Website vorschauen. Auch der Code ist Open Source.
Wir verwenden einen DOC -Generator, um unsere Komponentendokumentation zu erstellen. Wir geben eine kurze Beschreibung jeder Chat -Komponente und definieren alle von ihnen akzeptierten Requisiten.
Die React-Komponenten werden mit der Stream-Chat-JS-Bibliothek erstellt. Wenn Sie die Komponenten anpassen, müssen Sie mit unserem JavaScript -Client, der auf unserer Website eine Dokumentation enthält, zusätzliche Anrufe bei unserer Chat -API tätigen.
Ab Version 5.0.0 wurde die Komponentenbibliothek in TypeScript konvertiert. Bitte lesen Sie den TypeScript -Handbuch für Details und Implementierungsunterstützung.
Für Komponenten, die eine signifikante Logik implementieren, ist es hilfreich, die Komponente in zwei Teile aufzuteilen: eine Komponente der obersten Ebene, die die Funktionalität und eine Komponente auf niedrigerer Ebene übernimmt, die die Benutzeroberfläche rendert. Auf diese Weise können Sie die Benutzeroberfläche austauschen, ohne die Logik zu ändern, die der Komponente ihre Funktionalität verleiht. Wir verwenden dieses Anbieter/Verbrauchermuster häufig in der Bibliothek, und das folgende Beispiel zeigt, wie die Message UI -Komponente mit MessageTeam ausgetauscht wird, ohne eine Logik in der App zu beeinflussen.
< Channel Message = { MessageTeam } >
< Window >
< ChannelHeader />
< MessageList />
< MessageInput />
</ Window >
< Thread />
</ Channel >Die bevorzugte Methode zum Überschreiben der vordefinierten Stile in der Bibliothek ist zwei Schritte. Importieren Sie zunächst unser gebündeltes CSS in die Datei, in der Sie Ihre Chat -Anwendung instanziieren. Suchen Sie zweitens alle Stream -Stile, die Sie entweder mit dem Browser -Inspektor überschreiben möchten, oder indem Sie den Bibliothekscode anzeigen. Sie können dann Selektoren zu Ihrer lokalen CSS -Datei hinzufügen, um unsere Standardeinstellungen zu überschreiben. Zum Beispiel:
import 'stream-chat-react/dist/css/v2/index.css' ;
import './App.css' ; Unsere Bibliothek unterstützt die automatische Übersetzung für verschiedene Benutzersprachen. Bitte lesen Sie unsere Internationalisierungsdokumentation für weitere Details und Einrichtungsanleitungen.
Wir begrüßen Codeänderungen, die diese Bibliothek verbessern oder ein Problem beheben. Bitte befolgen Sie alle Best Practices und fügen Sie gegebenenfalls Tests hinzu, bevor Sie eine Pull -Anfrage auf GitHub einreichen. Wir freuen uns, Ihren Code in das offizielle Repository zusammenzufassen, wenn er einen Bedarf erfüllt. Stellen Sie zuerst unsere Mitwirkungslizenzvereinbarung (CLA) unterzeichnen. Weitere Informationen finden Sie in unserer Lizenzdatei.
Wir haben kürzlich eine Finanzierungsrunde der Serie B in Höhe von 38 Millionen US -Dollar abgeschlossen und wachsen aktiv. Unsere APIs werden von mehr als einer Milliarde Endbenutzern verwendet. Durch die Arbeit bei Stream haben Sie die Möglichkeit, einen enormen Einfluss auf ein Team von sehr starken Ingenieuren zu haben.
Schauen Sie sich unsere aktuellen Öffnungen an und bewerben Sie sich über die Website von Stream.
Dieses Projekt verwendet lamejs -Bibliothek unter der LGPL -Lizenz, um das aufgezeichnete Audio in MP3 -Format umzuwandeln. Der Bibliotheksquellcode wird dynamisch importiert und nur verwendet, wenn die Audioaufzeichnung aktiviert ist.
Sie können den Quellcode für lamejs aus dem LameJS -Repository, das eine Gabel der ursprünglichen JS -Bibliothek ist, abrufen. Sie finden den Quellcode für Lame unter https://lame.sourceforge.net und seine Lizenz unter: https://lame.sourceforge.net/license.txt
