React-jwchat NPM

react-jwchat

介绍

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

主要作用是为快速实现在线聊天功能的前端页面。

主要组件（暂时）包含聊天组件、联系人列表组件、单个联系人组件。

如果你也喜欢开源，如果你也喜欢这个项目请留下你的 Star 🌟，你们的 🌟 是对作者最大的鼓励，或者留下你的代码我们一起让他变得更好~~~

npm.io

安装

npm install react-jwchat
# or
yarn add react-jwchat
# or
pnpm install react-jwchat

组件

Chat

npm.io

使用：

<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

npm.io

使用：

<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

npm.io

使用：

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

属性：

key	type	desc	required
data	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',
  },
},

说明：