15 Star 211 Fork 44

SiroSong / react-jwchat

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

react-jwchat

npm type definitions npm npm bundle size npm NPM

介绍

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

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

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

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

安装

npm install react-jwchat
# or
yarn add react-jwchat
# or
pnpm 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 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',
  },
},

说明:

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

Repository Comments ( 33 )

Sign in to post a comment

About

react-jwchat是一个基于React实现的web聊天组件。 expand collapse
Cancel

react-jwchat

Contributors

All

Activities

Load More
can not load any more
TypeScript
1
https://gitee.com/wx_504ae56474/react-jwchat.git
git@gitee.com:wx_504ae56474/react-jwchat.git
wx_504ae56474
react-jwchat
react-jwchat
main

Search

101014 b92fc32e 1850385 101014 af024cb7 1850385