react-jwchat,一个简单的web聊天组件

4,830 阅读2分钟

react-jwchat

介绍

react-jwchat是一个简单的web聊天组件,基于react实现,用于方便快捷的搭建web聊天功能UI,这个项目是受另外一个vue的聊天组件启发创建的,想在react里也能通过简单快捷的方式构建聊天UI,目前这个项目还有很多的不足,希望各路大手多多指教。

仓库地址: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,
  }}
/>

属性:

keytypedescrequired
contactcontact联系人信息true
mecontact本人信息true
onSendfunc发送消息时触发回调,回调参数为组装好的消息对象true
onImagefunc选择图片后触发回调,回调参数为图片列表true
onEarlierfunc点击加载更多回调false
stylestyle容器样式(使用组件时需要指定width、height)true

ContactItem


使用:

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

属性:

keytypedescrequired
contactcontact联系人信息true
onClickfunc点击回调,回调参数包含当前联系人信息false
borderboolean时候显示列表项底部分隔线,在ContactList组件中默认为truefalse
stylestyle容器样式false

ContactList


使用:

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

属性:

keytypedescrequired
contactListcontact[]联系人列表,数组中的每个元素都为contact类型true
onSelectfunc选中联系人触发回调,参数为当前选中联系人对象false
stylestyle容器样式(使用时需要指定高度)false

API

contact

联系人信息对象


示例:

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

说明:

keydesc
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',
  },
},

说明:

keydesc
_id每条信息的唯一标识,组件内自动生成
date消息产生时间
user当前消息发起人的信息
message消息内容主体