chat ui kit react

chat ui kit react

Erstellen Sie in wenigen Minuten Ihre eigene Chat-Benutzeroberfläche mit React-Komponenten.
Das Chat UI Kit von chatscope ist ein Open-Source-UI-Toolkit zur Entwicklung von Web-Chat-Anwendungen.

Sind Sie es leid, sich mit klebrigen Bildlaufleisten, bearbeitbaren Inhalten, Reaktionsfähigkeit und CSS-Hacks herumzuschlagen?
Dieses Set ist genau das Richtige für Sie! Alle Funktionen anzeigen.

Mit dem Chat UI Kit können Sie die Chat-Benutzeroberfläche mit Warp-Geschwindigkeit entwickeln

Demo

• Voll ausgestattete Chat-Anwendung: https://demo.chatscope.io
• Zoe, Akane, Eliot und Joe: https://chatscope.io/demo/chat-friends
• Chatten Sie mit dem Marsianer (er ist manchmal verfügbar): https://mars.chatscope.io

Demo-Index: https://chatscope.io/demo.

Installieren

Komponentenbibliothek

Verwendung von Garn:

yarn add @chatscope/chat-ui-kit-react

Mit npm:

npm install @chatscope/chat-ui-kit-react

Stile

Verwendung von Garn:

yarn add @chatscope/chat-ui-kit-styles

Mit npm:

npm install @chatscope/chat-ui-kit-styles

Verwendung

ESM

 import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css" ;
import {
  MainContainer ,
  ChatContainer ,
  MessageList ,
  Message ,
  MessageInput ,
} from "@chatscope/chat-ui-kit-react" ;

< div style = { { position : "relative" , height : "500px" } } >
  < MainContainer >
    < ChatContainer >
      < MessageList >
        < Message
          model = { {
            message : "Hello my friend" ,
            sentTime : "just now" ,
            sender : "Joe" ,
          } }
        />
      </ MessageList >
      < MessageInput placeholder = "Type message here" />
    </ ChatContainer >
  </ MainContainer >
</ div > ;

Ja! Ihre erste Chat-GUI ist fertig!

UMD

Die UMD-Nutzung ist in unserem Storybook dokumentiert.

Dokumentation

Schauen Sie sich unser freundliches Bilderbuch an.

Typoskript

Die Bibliothek ist in Javascript geschrieben, Typescript-Typisierungen sind jedoch seit Version 1.9.3 im Paket verfügbar.

Siehe auch

@chatscope/use-chat ist ein React-Hook für die Statusverwaltung in Chat-Anwendungen.
Probieren Sie es aus und sehen Sie, wie einfach Sie die Chat-Logik selbst erstellen können.

Zeigen Sie Ihre Unterstützung

Wenn Sie eine tolle Chat-Benutzeroberfläche erstellt haben und diese Bibliothek lieben, freuen Sie sich über dieses Repository!

Gemeinschaft und Unterstützung

• Twittern über @chatscope
• Chatten bei Discord
• Facebooking bei Facebook
• Artikel im Chatscope-Blog

Webseite

https://chatscope.io

Lizenz

MIT