chat ui kit react

chat ui kit react

Bangun UI obrolan Anda sendiri dengan komponen React dalam beberapa menit.
Kit UI Obrolan dari chatscope adalah perangkat UI sumber terbuka untuk mengembangkan aplikasi obrolan web.

Bosan berkutat dengan bilah gulir yang lengket, dapat diedit, responsif, peretasan css?
Perlengkapan ini untuk Anda! Lihat semua fitur.

Kit UI Obrolan memberi Anda pengembangan UI obrolan dengan kecepatan tinggi

Demo

• Aplikasi chatting berfitur lengkap: https://demo.chatscope.io
• Zoe, Akane, Eliot dan Joe: https://chatscope.io/demo/chat-friends
• Mengobrol dengan orang Mars (terkadang dia tersedia): https://mars.chatscope.io

Indeks demo: https://chatscope.io/demo.

Memasang

Perpustakaan komponen

Menggunakan benang:

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

Menggunakan npm:

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

Gaya

Menggunakan benang:

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

Menggunakan npm:

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

Penggunaan

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

Ya! GUI obrolan pertama Anda sudah siap!

UMD

Penggunaan UMD didokumentasikan dalam Buku Cerita kami.

Dokumentasi

Periksa Buku Cerita kami yang ramah.

naskah ketikan

Pustaka ditulis dalam Javascript, tetapi pengetikan TypeScript tersedia dalam paket sejak versi 1.9.3.

Lihat juga

@chatscope/use-chat adalah React hook untuk manajemen status dalam aplikasi chat.
Lihatlah dan lihat betapa mudahnya Anda melakukan logika obrolan sendiri.

Tunjukkan dukungan Anda

Jika Anda telah membuat UI obrolan yang mengagumkan dan menyukai perpustakaan ini, silakan repositori ini!

Komunitas dan dukungan

• Berkicau melalui @chatscope
• Mengobrol di Discord
• Facebook di Facebook
• Artikel di blog chatscope

Situs web

https://chatscope.io

Lisensi

MIT