我调查了用于实现聊天功能的React UI库，现在我要分享一下笔记

3 年 ago

逸, 科

1 minute

为了实现聊天功能，调研适用于 React 的 UI 库。

使用

@chatscope/chat-ui-kit-react 的本地中文解释：聊天工具包的React UI套件。

機能概要:

Web チャットアプリ開発向けのオープンソース UI ツールキット。
43 個の再利用可能な React コンポーネント。
フルレスポンシブとカスタマイズ可能。
400 個の scss 変数とテーマ化のサポート。

画面適応:

Web チャット UI の迅速な開発をサポート。
スティッキースクロールバー、contenteditable、レスポンシビリティの問題解消機能提供。

Github Star: 817

直近の更新: Aug 22, 2023

选择原因

自由度が高い

备忘录：

デモには、画像とかバイナリファイル選択の表示なし

※ストーリーブックにはあったので画像とかも送れそう

https://chatscope.io/demo/

実装簡単そう

ストーリーブック

https://chatscope.io/storybook/react/?path=/story/components-message–image-content

実装参考

【React で chat 機能を実装するための UI ライブラリ chat-ui-kit-react が好みの UI 過ぎるので使い方を解説する】 – Qiita

拒绝了的候选人

React-Chat-Elements: 聊天元素反应

機能概要:

メッセージコンポーネント、システムメッセージコンポーネント、バブルコンポーネント、ユーザーアバターコンポーネント、入力フォームコンポーネントなど、豊富なチャット関連コンポーネントを提供

画面適応: 通常のチャット画面や、システムメッセージを含む高度なチャットインタフェースの作成に適しています。

Github Star: 1K

直近の更新: Jun 5, 2023

备忘录:

Getting Started | React Chat Elements

実装参考

Text Message | React Chat Elements

React-Chat-UI: 反应-聊天-用户界面

機能概要:

シンプルなデザインとカスタマイズ可能なスタイルを提供。
メッセージ送信時のアニメーションやスクロール機能を含む基本的なチャット UI 機能を提供

画面適応: シンプルで直接的なチャット画面の作成に適しています。

Github Star: 509

直近の更新: Jun 28, 2023

备忘录：

brandonmowat.github.io/react-chat-ui/demo/

ただ、issues の数や PR の数、Github Star の数が他に比べて少ない(メンテナーが少ない)ので却下

响应-聊天-小工具

機能概要:

カスタマイズ可能なデザイン、オートスクロール、画像やファイルの添付サポート、メッセージのステータス表示、送信中のメッセージ表示など、ウェブアプリケーションに迅速に追加できるチャットウィジェットを提供

画面適応: レスポンシブデザイン対応のため、異なるデバイスや画面サイズに対応するチャット画面の作成に適しています。

Github Star: ### 3- 直近の更新: Dec 1, 2021

备忘录：

直近の更新がないため却下

把Chaskiq的内容改写成中文，只需要一个选项：

查斯基

機能概要:

リッチメッセージコンポーネント、カスタマイズ可能なテーマ、ビデオ・音声チャット対応、キャンペーンやアンケート機能、サードパーティ連携など、カスタマーサポート向けのチャットウィジェットとしての機能を提供

画面適応: カスタマーサポートやビデオ・音声チャットが必要な画面に適しています。

Github Star: 2.6K

直近の更新: 24h 以内

备忘录:

今回の仕様にとっては、オーバーな機能のため却下

使用

@chatscope/chat-ui-kit-react 的本地中文解释：聊天工具包的React UI套件。

选择原因

拒绝了的候选人

React-Chat-Elements: 聊天元素反应

React-Chat-UI: 反应-聊天-用户界面

响应-聊天-小工具

把Chaskiq的内容改写成中文，只需要一个选项：

热门搜索 –