react chat ui

React-Chat-UI

Eine Bibliothek mit React-Komponenten zum Erstellen von Chat-Benutzeroberflächen.

Sponsor

Gesponsert von Pusher Chatkit:

Merkmale

• Automatisches Scrollen nach unten

• SUPER einfach zu bedienen

• Mehrere Benutzergruppierungen (probieren Sie es in der Demo aus)

Bedenken Sie, dass sich dieses Projekt noch in einem frühen Entwicklungsstadium befindet. Wenn Sie auf einen Fehler stoßen oder eine Funktionsanfrage haben, erstellen Sie bitte hier ein Problem und/oder twittern Sie an mich.

Installation

npm install react-chat-ui --save

Grundlegende Verwendung

 import { ChatFeed, Message } from 'react-chat-ui'// Dein Codematerial...render() {

  return (// Your JSX...<ChatFeed messages={this.state.messages} // Array: Liste der Nachrichtenobjekte isTyping={this.state.is_typing} // Boolean: ist der Empfänger, der hasInputField={false} eingibt // Boolescher Wert: Verwenden Sie unsere Eingabe oder Ihren eigenen showSenderName // Zeigt den Namen des Benutzers an, der die Nachricht gesendet hat. bubblesCentered={false} //Boolescher Wert, falls die Blasen zentriert sein sollen der Feed? // JSON: Benutzerdefinierte Blasenstile bubbleStyles={{ text: {fontSize: 30 }, chatbubble: {borderRadius: 70,padding: 40 }} }/>// Ihr JSX...

  )}

Stellen Sie sicher, dass Sie eine Liste der richtigen Nachrichtenobjekte in Ihrem Klassenstatus führen. Etwa so:

 //...this.state = {
  Nachrichten: [new Message({ id: 1, message: „Ich bin der Empfänger! (Die Person, mit der Sie sprechen)“,}), // Graue Blasenew Message({ id: 0, message: „I' „Ich bin du – die blaue Blase!" }), // Blaue Blase
  ],
  //...};//...

API

• ChatFeed

• Nachricht

• ChatBubble

• BubbleGroup

Mitwirken!¡1 ?

Beiträge sind jederzeit willkommen und erwünscht. Wenn Sie nicht selbst eine Funktionsanfrage schreiben möchten, lassen Sie es uns wissen (entweder auf Twitter oder indem Sie eine Pull-Anfrage erstellen), und ich werde den Mist sofort codieren.

TODO

• Dokumentation

• Dokumentation

• Dokumentation

Entwicklung

 Garnentw