Chat-React基于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 你必须为这个参数定义 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: ':panda_face:'},
  {text: 'tiger', content: ':tiger:'},
  {text: 'pig', content: ':pig:'}
]
复制代码

• 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: ":grinning:",
    error: true //设置消息状态为失败，显示错误状态图标
}]
复制代码

• messageListStyle 消息列表的容器样式，你必须为其设置一个固定的高度，保证其不会被内容撑开，例如 {width: '100%', height: 500}
• timestamp 当前 dataSource 的数据发生变化时候必须重新设置该参数为当前的时间戳
• timeFormat 格式化时间参数，例如显示2019-2-1 20: 20设置为yyyy-MM-dd hh:mm