react-jwchat，一个简单的web聊天组件
react-jwchat
介绍
react-jwchat是一个简单的web聊天组件，基于react实现，用于方便快捷的搭建web聊天功能UI，这个项目是受另外一个vue的聊天组件启发创建的，想在react里也能通过简单快捷的方式构建聊天UI，目前这个项目还有很多的不足，希望各路大手多多指教。
仓库地址：https://gitee.com/wx_504ae56474/react-jwchat
安装
npm install react-jwchat
组件
Chat
使用：
<Chatcontact={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
使用：
<ContactItemcontact={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
使用：
<ContactListcontactList={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: '敌我打野差距
react-jwchat，一个简单的web聊天组件相关推荐
- 使用socket.io做一个简单的WEB聊天室
使用socket.io做一个简单的WEB聊天室(可消息私发) 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置p ...
- 【计算机网络作业】Java UDP聊天 和 Socket编写一个简单的Web服务器
1-1 假设Tom和Jerry利用Java UDP进行聊天,请为他们编写程序.具体如下: (1).Tom和Jerry聊天的双方都应该具有发送端和接收端: (2).利用DatagramSocket与Da ...
- Spring和WebSocket整合并建立简单的Web聊天室
Spring和WebSocket整合并建立简单的Web聊天室 官方主页 Spring WebSocket 一.概述 WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. Web ...
- 实现一个简单的语音聊天室（源码）
语音聊天室,或多人语音聊天,是即时通信应用中常见的功能之一,比如,QQ的语音讨论组就是我们用得比较多的. 这篇文章将实现一个简单的语音聊天室,让多个人可以进入同一个房间进行语音沟通.先看运行效果截图: ...
- 使用React实现一个简单计算器
使用React实现一个简单的计算器代码 实现效果: index.html <!DOCTYPE html> <html lang="en"><head& ...
- WebSocket实现简单的web聊天室
WebSocket实现简单的web聊天室 1.需要Tomcat7.0所以服务器 2.需要JDK7.0 3.手工加入Tomcat7.0中lib目录下的一下三个包catalina.jar.tomcat-c ...
- Nest的基本概念，以及如何使用Nest CLI来构建一个简单的Web应用程序
Nest是一个用于构建高效.可扩展的Node.js服务器端应用程序的框架.它是基于Express.js构建的,并且提供了多种新特性和抽象层,可以让开发者更加轻松地构建复杂的应用程序. 本文将介绍Nes ...
- ipad php mysql_如何用PHP/MySQL为 iOS App 写一个简单的web服务器（译） PART1
原文:http://www.raywenderlich.com/2941/how-to-write-a-simple-phpmysql-web-service-for-an-ios-app 作为一个i ...
- [译]使用 Rust 开发一个简单的 Web 应用，第 4 部分 —— CLI 选项解析
原文地址:A Simple Web App in Rust, Part 4 -- CLI Option Parsing 原文作者:Joel's Journal 译文出自:掘金翻译计划 本文永久链接:g ...
- maven学习笔记之IDEA+Maven+Jetty运行一个简单的web项目
maven学习笔记 一.什么是maven Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Life ...
最新文章
- pandas 索引_10分钟带你学会Pandas多层级索引
- 成功解决ValueError: Cannot feed value of shape (80, 15, 1, 1) for Tensor 'Placeholder_1:0', which has sh
- TypeError: Can not convert a float32 into a Tensor or Operation.
- Web 趋势榜：上周最有意思、最热门的 10 大 Web 项目 - 210625
- 每天五个java相关面试题（3）
- BugkuCTF-Crypto题把猪困在猪圈里
- 集成学习——机器学习面试
- mysql+drbd+heartbeat高可用配置说明
- 一个新的自己从2009年的第一天...
- 布局篇(2)—If you love css …
- c语言 库仑计_android电池（四）：电池 电量计(MAX17040)驱动分析篇
- python制作病毒_python做病毒
- “五小时定律”：巴菲特受益一生的生活习惯
- 为什么手机网速太慢_为什么苹果手机的网速变慢了_苹果手机上网速度慢的解决方法－系统城...
- openwrt在mt7620a上的折腾笔记
- [机器学习] 信用评分卡中的应用 | 干货
- 庖丁解牛分词工具使用教程
- android 10.0 在系统源码下生成jks系统签名文件
- java swing 毛玻璃_实时、动态的毛玻璃（aero）效果，javaSwing 实现的，用的是高斯模糊算法...
- 程序猿也爱学英语，有图有真相
热门文章