react-jwchat

react-jwchat 是一个简单的 web 聊天组件。react-jwchat is a simple web chat component.

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

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

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

Usage

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

import { Chat, IMessage } from "react-jwchat"
// 若打包器不处理依赖内的 css import，手动引入：
// import "react-jwchat/style.css"

export default function App() {
  const [chatList, setChatList] = useState<IMessage[]>([])

  return (
    <Chat
      me={{ id: 1, nickname: "me", avatar: "..." }}
      contact={{ id: 2, nickname: "friend", avatar: "..." }}
      chatList={chatList}
      onSend={(msg) => setChatList([...chatList, msg])}
    />
  )
}

Theming / 主题定制

所有颜色都是 CSS 变量，覆盖同名变量即可换肤。使用方不需要安装 tailwindcss —— react-jwchat/style.css 是预编译好的普通 CSS，tailwindcss 只是本库的构建期依赖。

@import "react-jwchat/style.css";

:root {
  --color-jw-primary: #7c3aed; /* 发送按钮、图标 hover */
  --color-jw-primary-active: #6d28d9;
  --color-jw-bubble: #ddd6fe; /* 消息气泡 */
}

变量会继承，所以挂在任意祖先元素上就能做局部换肤 / 多主题共存，内联样式的优先级最高：

<div style={{ "--color-jw-primary": "#7c3aed" } as React.CSSProperties}>
  <Chat ... />
</div>

完整变量清单（13 个，含深色模式示例）见 主题定制文档。

Development

# install dependencies
$ yarn install

# develop library by docs demo
$ yarn start

# build library source code
$ yarn build

# build library source code in watch mode
$ yarn build:watch

# build docs
$ yarn docs:build

# check your project for potential problems
$ yarn doctor

LICENSE

MIT