react-jwchat

介绍

react-jwchat 是一个简略的 web 聊天组件。

仓库地址：https://gitee.com/wx_504ae56474/react-jwchat～欢送各位大佬倡议斧正。

装置

npm install react-jwchat

组件

Chat

应用：

<Chat  contact={contact}  me={my}  chatList={msgList}  onSend={(msg) => {}}  onEarlier={() => {}}  onImage={(files) => {}}  style={{    width: 600,    height: 500,  }}/>

属性：

key	type	desc	required
contact	contact	联系人信息	true
me	contact	自己信息	true
onSend	func	发送音讯时触发回调，回调参数为组装好的音讯对象	true
onImage	func	抉择图片后触发回调，回调参数为图片列表	true
onEarlier	func	点击加载更多回调	false
style	style	容器款式（应用组件时须要指定 width、height）	true

ContactItem

应用：

<ContactItem contact={contact} onClick={(contact) => console.log(contact)} />

属性：

key	type	desc	required
contact	contact	联系人信息	true
onClick	func	点击回调，回调参数蕴含以后联系人信息	false
border	boolean	时候显示列表项底部分隔线，在 ContactList 组件中默认为 true	false
style	style	容器款式	false

ContactList

应用：

<ContactList  contactList={contactList}  onSelect={(contact) => console.log(contact)}/>

属性：

key	type	desc	required
contactList	contact[]	联系人列表，数组中的每个元素都为 contact 类型	true
onSelect	func	选中联系人触发回调，参数为以后选中联系人对象	false
style	style	容器款式(应用时须要指定高度)	false

API

contact

联系人信息对象

示例：

{    id: 16,    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',    nickname: '金克丝',    message: '这是一条信息',    date: '02-11',    desc: '一行简短的简介',}

阐明：

key	desc
id	用户标示，须要惟一
avatar	用户头像
nickname	用户昵称
message	最近一条信息
date	信息更新工夫
desc	用户简介(用于在聊天框头部显示)

message

音讯对象

示例：

以后信息为文字信息时，message.type === 'text'

{    _id: '75b5bde8f3b9ef7aa9b704492cb28baf',    date: 1610016580,    user: {        id: 1234,        avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',        nickname: 'sirosong',        desc: '这是我的第一条信息',    },    message: { type: 'text', content: '敌我打野差距 ' },},

以后信息为文字信息时，message.type === 'image'

{  _id: '75b5bde8f3b9ef7aa904492cb28baf',  date: 1610016880,  user: {    id: 9527,    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',    nickname: '卡兹克',    desc: '这是我的第一条信息',  },  message: {    type: 'image',    content: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',  },},

阐明：

key	desc
_id	每条信息的惟一标识，组件内主动生成
date	音讯产生工夫
user	以后音讯发起人的信息
message	音讯内容主体