React で chat 機能を実装するための UI ライブラリの調査
採用
@chatscope/chat-ui-kit-react
-
機能概要:
- Web チャットアプリ開発向けのオープンソース UI ツールキット。
- 43 個の再利用可能な React コンポーネント。
- フルレスポンシブとカスタマイズ可能。
- 400 個の scss 変数とテーマ化のサポート。
-
画面適応:
- Web チャット UI の迅速な開発をサポート。
- スティッキースクロールバー、contenteditable、レスポンシビリティの問題解消機能提供。
- Github Star: 817
- 直近の更新: Aug 22, 2023
採用理由
- トレンディ
- 自由度が高い
memo:
- デモ
- デモには、画像とかバイナリファイル選択の表示なし
- ※ストーリーブックにはあったので画像とかも送れそう
- https://chatscope.io/demo/
- デモには、画像とかバイナリファイル選択の表示なし
- 実装簡単そう
却下した候補
React-Chat-Elements
-
機能概要:
- メッセージコンポーネント、システムメッセージコンポーネント、バブルコンポーネント、ユーザーアバターコンポーネント、入力フォームコンポーネントなど、豊富なチャット関連コンポーネントを提供
- 画面適応: 通常のチャット画面や、システムメッセージを含む高度なチャットインタフェースの作成に適しています。
- Github Star: 1K
- 直近の更新: Jun 5, 2023
memo:
React-Chat-UI:
-
機能概要:
- シンプルなデザインとカスタマイズ可能なスタイルを提供。
- メッセージ送信時のアニメーションやスクロール機能を含む基本的なチャット UI 機能を提供
- 画面適応: シンプルで直接的なチャット画面の作成に適しています。
- Github Star: 509
- 直近の更新: Jun 28, 2023
memo:
- demo サイトあり。
- ただ、issues の数や PR の数、Github Star の数が他に比べて少ない(メンテナーが少ない)ので却下
React-Chat-Widget
-
機能概要:
- カスタマイズ可能なデザイン、オートスクロール、画像やファイルの添付サポート、メッセージのステータス表示、送信中のメッセージ表示など、ウェブアプリケーションに迅速に追加できるチャットウィジェットを提供
- 画面適応: レスポンシブデザイン対応のため、異なるデバイスや画面サイズに対応するチャット画面の作成に適しています。
- Github Star: ### 3- 直近の更新: Dec 1, 2021
memo:
- 直近の更新がないため却下
Chaskiq
-
機能概要:
- リッチメッセージコンポーネント、カスタマイズ可能なテーマ、ビデオ・音声チャット対応、キャンペーンやアンケート機能、サードパーティ連携など、カスタマーサポート向けのチャットウィジェットとしての機能を提供
- 画面適応: カスタマーサポートやビデオ・音声チャットが必要な画面に適しています。
- Github Star: 2.6K
- 直近の更新: 24h 以内
memo:
- 今回の仕様にとっては、オーバーな機能のため却下
トレンド検索
Google trends: https://trends.google.co.jp/trends/explore?q=@chatscope%2Fchat-ui-kit-react,react-chat-elements,react-chat-ui,react-chat-widget&hl=ja