Chat-Reactベースのチャットセッションコンポーネント

Chat-React
reactベースのチャットセッションコンポーネントGitHubアドレス
chat-react
デモ
chat-react
使用方法

取付

npm install chat-react

導入

import Chat from 'chat-react';

を使用

export default class MyChat extends Component {
  state = {
    inputValue: '',
    messages: [],
    timestamp: new Date().getTime()
  }
  setInputfoucs = () => {
    this.chat.refs.input.inputFocus();  //set input foucus
  }
  setScrollTop = () => {
    this.chat.refs.message.setScrollTop(1200);  //set scrollTop position
  }
  sendMessage = (v) => {
    const {value} = v;
    if (!value) return;
    const {messages = []} = this.state;
    messages.push(v);
    this.setState({messages, timestamp: new Date().getTime(), inputValue: ''});
  }
  render() {
    const {inputValue, messages, timestamp} = this.state;
    const userInfo = {
      avatar: "http://img.binlive.cn/6.png",
      userId: "59e454ea53107d66ceb0a598",
      name: 'ricky'
    };
    return (
      <Chat
        ref={el => this.chat = el}
        className="my-chat-box"
        dataSource={messages}
        userInfo={userInfo}
        value={inputValue}
        sendMessage={this.sendMessage}
        timestamp={timestamp}
        placeholder="   "
        messageListStyle={{width: '100%', height: window.outerHeight}}
      />
    );
  }
}

API
属性&メソッド
を選択します.
説明
userInfo
object
現在のユーザー情報
value
string
入力ボックスの内容
placeholder
string
入力ボックスのプレースホルダ
emoji
any
emojiコンテンツの定義
customEmoticon
array
カスタム表情パック
textareaChange
(value) => {}
コールバック関数、入力ボックスの内容が変化するとトリガーされ、関数の最初のパラメータは現在の入力値です.
selectEmoje
(emojeInfo) => {}
emoji後のコールバック関数を選択し、関数の最初のパラメータは選択したemojeコンテンツ情報です.
inputFocus
func
サブアセンブリinputの組み込み方法、inputフォーカスthis.chat.refs.input.inputFocus()を設定するために使用される
dataSource
array
メッセージ・リストのデータ・コンテンツ
messageListStyle
object
メッセージ・リストのスタイル.リストに一定の高さを設定する必要があります.
timestamp
number
データソースが変化したときに設定されたタイムスタンプ
timeBetween
number
指定した間隔内にタイム・プロンプトを表示します(単位:分、デフォルト:5)
timeagoMax
number
指定した時間範囲内に表示される時間(単位:時間、デフォルト:24)
timeFormat
string
カスタムタイムフォーマット(yyyy-MM-dd hh:mm)
loading
bool
データソースがロードされているかどうか
loader
node
カスタムローダ
noData
bool
これ以上データがないか
noDataEle
node
より多くのデータがない場合は、カスタム要素ノードを表示します.
scrollOptions
object
このパラメータはiscrollを使用する.jsのscrollbarsパラメータ、iscrollを表示します.jsドキュメント
scrolltoUpper
func
スクロールバーが上部にスクロールされたときにトリガーされるコールバック関数
onScroll
func
スクロールバーがスクロールされるとトリガーされるコールバック関数
avatarClick
(value) => {}
ユーザはアイコンをクリックしてトリガしたコールバック関数をクリックし、パラメータvalueはクリックされたユーザ情報である.
unreadCountChange
func
未読メッセージ変更時のコールバック関数
setScrollTop
setScrollTop(value)
サブアセンブリmessageの組み込み方法で、スクロールバー位置this.chat.refs.message.setScrollTop(1200)を設定します.
コンポーネントパラメータの説明

userInfoこのパラメータにuserIdとavatarのプロパティを定義する必要があります.また、必要なプロパティを追加することもできます.

userInfo = {
 avatar: 'http://example/avatar.jpg', //user avatar,  required parameters
 userId: '5bf7cf25a069a537ffe7c324', //user id,  required parameters
 name: 'rigcky',
 other: 'otherInfo'
}

emoji emojiパラメータがfalseに設定されている場合、emojiは表示されません.より多くのemojiを追加したい場合は、このパラメータを配列に設定し、内容を追加したemojiに設定できます.

// add more emoji
emoji = [
  {text: 'panda', content: '?'},
  {text: 'tiger', content: '?'},
  {text: 'pig', content: '?'}
]

customEmoticonカスタム表情パック、パラメータは配列タイプ

customEmoticon = [
 {text: 'smile', url: 'http://example/emoticon.png'},
 {text: 'angry', url: 'http://example/emoticon2.png'},
 {text: 'weep', url: 'data:image/png;base64,iVBORw0KGgoA...'}
]

dataSourceメッセージリストのデータソース、データフォーマットは以下の通り:

const customEmoticon = [{
    timestamp: 1545925494422,
    userInfo: {
        avatar: "http://example/2.png",
        name: "  1544365758856",
        userId: "1544365758856"
    },
    value: "hello~"
},  {
    timestamp: 1545925534218,
    userInfo: {
        avatar: "http://example/2.png",
        name: "  1544365758856",
        userId: "1544365758856"
    },
    value: "?",
    error: true //         ，        
}]

messageListStyleメッセージリストのコンテナスタイルは、{width: '100%', height: 500}

などのコンテンツに拡張されないように、一定の高さを設定する必要があります.

timestamp現在dataSourceのデータが変化する場合は、このパラメータを現在のタイムスタンプ

として再設定する必要がある.

timeFormat時間パラメータをフォーマットし、例えば2019-2-1 20:20にyyyy-MM-dd hh:mm

に設定することを示す.