乐趣区

关于前端:简单易用的React在线聊天窗组件reactjwchat

jiezi

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 音讯内容主体
退出移动版