Chat-React基於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