Chat-React

chat component for react. 中文文档

Demonstration

Usage

• Install

npm install chat-react

• Import

import Chat from 'chat-react';

• usage

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="write some thing..."
        messageListStyle={{width: '100%', height: window.outerHeight}}
      />
    );
  }
}

API

prop & func	type	description
userInfo	object	info of current user
value	string	the message of input content
placeholder	string	placeholder for input box
emoji	any	define content of the emoji
customEmoticon	array	customized emoticon
textareaChange	(value) => {}	callback function when the content of input box changes. the first function parameter is current input value
selectEmoje	(emojeInfo) => {}	callback function after select a emoje. the first function parameter is selected emoje info
inputFocus	func	method of input child component, set input focus. this.chat.refs.input.inputFocus()
dataSource	array	data content of message list
messageListStyle	object	message list container style,you need to set a fixed size height for it.
timestamp	number	timestamp to be set when dataSource changes
timeBetween	number	how many time between show time prompts (unit: min, default: 5)
timeagoMax	number	time range of the show timeago (unit: hour, default: 24)
timeFormat	string	custom format time (yyyy-MM-dd hh:mm)
loading	bool	is the dataSource loading
loader	node	custom loader
noData	bool	whether has no more data
scrollOptions	object	this param used iscroll.js's scrollbars parameter, iscroll.js Doc.
noDataEle	node	custom dom node displayed when there is no more data
scrolltoUpper	func	callback function when the scroll bar of message list to the top
onScroll	func	callback function when the scroll bar change
avatarClick	func	callback function user to click the avatar
unreadCountChange	func	callback function when the unread message has change
setScrollTop	func	method of message child component, set scroll bar position. this.chat.refs.message.setScrollTop(1200)

the param description of component

• userInfo you must to be define userId and avatar for this param, and you can also add some attributes if you need.

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

• emoji if emoji param is false, not show emoji. if you want to add more emoji, you can set this param is array content.

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

• customEmoticon customized emoticon, it is array type of this param.

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

• dataSource data source of message list, the data format is as follows:

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 //set error is true, this message will be show error icon
}]

• messageListStyle message list container style, you need to set a fixed size height for it, make sure it's not pushed up, for example {width: '100%', height: 500}
• timestamp this parameter needs to be set to the current timestamp when the data of dataSource param has changes.
• timeFormat formatting times, such as display 2019-2-1 20:20 set to yyyy-MM-dd hh:mm.