chat ui kit react

chat ui kit react

Создайте свой собственный пользовательский интерфейс чата с помощью компонентов React за несколько минут.
Chat UI Kit от Chatscope — это набор инструментов пользовательского интерфейса с открытым исходным кодом для разработки приложений веб-чата.

Устали бороться с липкими полосами прокрутки, удобством редактирования, отзывчивостью и CSS-хаками?
Этот комплект для вас! Посмотреть все функции.

Chat UI Kit позволяет вам разрабатывать интерфейс чата с невероятной скоростью.

Демо

• Полнофункциональное приложение для чата: https://demo.chatscope.io.
• Зои, Аканэ, Элиот и Джо: https://chatscope.io/demo/chat-friends
• Пообщайтесь с марсианином (иногда он доступен): https://mars.chatscope.io

Индекс демонстраций: https://chatscope.io/demo.

Установить

Библиотека компонентов

Использование пряжи:

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

Использование НПМ:

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

Стили

Использование пряжи:

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

Использование НПМ:

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

Использование

ЭСМ

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

Ага! Ваш первый графический интерфейс чата готов!

УМД

Использование UMD описано в нашем сборнике рассказов.

Документация

Проверьте наш дружелюбный сборник рассказов.

Машинопись

Библиотека написана на Javascript, но типизация Typescript доступна в пакете начиная с версии 1.9.3.

См. также

@chatscope/use-chat — это перехватчик React для управления состоянием в приложениях чата.
Проверьте это и убедитесь, насколько легко вы можете реализовать логику чата самостоятельно.

Покажите свою поддержку

Если вы создали потрясающий интерфейс чата и вам нравится эта библиотека, пожалуйста, посетите этот репозиторий!

Сообщество и поддержка

• Твит через @chatscope
• Общение в Discord
• Facebooking в Facebook
• Статьи в блоге чатскопа

Веб-сайт

https://chatscope.io

Лицензия

Массачусетский технологический институт