react chat uiダウンロード - react chat uiソースコードのダウンロード

react chat ui

AI ソースコード

0.4

ダウンロード

反応チャットUI

チャット UI を構築するための React コンポーネントのライブラリ。

スポンサー

Pusher Chatkit によるスポンサー:

特徴

最下位まで自動スクロール
とても使いやすい
複数のユーザーのグループ化 (デモで試してください)

このプロジェクトはまだ開発の初期段階にあることに注意してください。バグが発生した場合、または機能リクエストがある場合は、問題を作成するか、ここで私にツイートしてください。

インストール

npm install react-chat-ui --save

基本的な使い方

import { ChatFeed, Message } from 'react-chat-ui'// コード内容...render() {

  return (// あなたの JSX...<ChatFeedmessages={this.state.messages} // 配列: メッセージ オブジェクトのリスト isTyping={this.state.is_typing} // ブール値: 入力中の受信者です hasInputField={false} // ブール値: 入力を使用するか、独自の showSenderName を使用します // メッセージを送信したユーザーの名前を表示します bubblesCentered={false} // バブルを中央に配置する必要があるブール値// JSON: カスタムバブルスタイル bubbleStyles={{ text: {fontSize: 30 }, chatbubble: {borderRadius: 70,padding: 40 }} }/>// JSX...

  )}

クラス状態に適切なメッセージオブジェクトのリストを必ず保持してください。同様に:

 //...this.state = {
  messages: [new Message({ id: 1, message: "私が受信者です! (話している人)",}), // 灰色のバブルnew Message({ id: 0, message: "私"私はあなた -- 青い泡です!" }), // 青い泡
  ]、
  //...};//...