npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nojsja/react-chat

v1.5.5

Published

An easy-to-use web chat component, based on react.

Downloads

1

Readme

react-chat

npm type definitions npm npm bundle size npm NPM

介绍

react-chat 是一个简单的 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 | 消息内容主体 |