chat ui kit react Télécharger - chat ui kit react Code source télécharger

chat ui kit react

Code Source AI

v2.0.3

Télécharger

chat ui kit react

Créez votre propre interface utilisateur de chat avec les composants React en quelques minutes.
Le Chat UI Kit de chatscope est une boîte à outils d'interface utilisateur open source pour développer des applications de chat Web.

Fatigué de lutter avec les barres de défilement collantes, le contenu modifiable, la réactivité et les hacks CSS ?
Ce kit est fait pour vous ! Voir toutes les fonctionnalités.

Chat UI Kit vous permet de développer l'interface utilisateur de chat à une vitesse vertigineuse

Démo

Application de chat complète : https://demo.chatscope.io
Zoé, Akane, Eliot et Joe : https://chatscope.io/demo/chat-friends
Discutez avec le Martien (il est disponible parfois) : https://mars.chatscope.io

Index des démos : https://chatscope.io/demo.

Installer

Bibliothèque de composants

Utiliser du fil :

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

Utilisation de npm :

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

Styles

Utiliser du fil :

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

Utilisation de npm :

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

Usage

MES

 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 > ;

Ouais! Votre première interface graphique de chat est prête !

UMD

L'utilisation de l'UMD est documentée dans notre Storybook.

Documentation

Consultez notre sympathique livre d'histoires.

Manuscrit

La bibliothèque est écrite en Javascript, mais les typages Typescript sont disponibles dans le package depuis la version 1.9.3.

Voir aussi

@chatscope/use-chat est un hook React pour la gestion de l'état dans les applications de chat.
Vérifiez-le et voyez avec quelle facilité vous pouvez réaliser vous-même la logique de discussion.