# @codaworks/react-glow 中文文档

规范地址：https://npmcn.com/package/%40codaworks/react-glow/

版本：1\.0\.6
npm 元数据更新时间：2024-01-17T17:59:43.883Z
中文译文更新时间：2026-11-10T05:37:42.817Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40codaworks/react-glow
原文对照：https://npmcn.com/package/%40codaworks/react-glow/?lang=original
项目主页：https://github.com/codaworks/react-glow#readme
源码仓库：https://github.com/codaworks/react-glow

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：49.7 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=10
- 运行依赖：0 个
- peer 依赖：react \>=16，tailwindcss \>=3
- 首次发布：2023-09-27T17:56:27.631Z
- 最新版本发布：2024-01-17T17:59:43.666Z
- 近 30 天下载量：32299（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 0 个）

## 中文简介

添加鼠标跟踪发光效果到 React 组件

## 安装

```sh
npm install @codaworks/react-glow
```

也可以使用：`pnpm add @codaworks/react-glow`、`yarn add @codaworks/react-glow`、`bun add @codaworks/react-glow`

## README

# 反应发光

添加鼠标跟踪发光效果到 React 组件 .

![gif of glow effect](https://npmcn.com/package/%40codaworks/react-glow/media/glow.gif)

发光效果只能使用鼠标作为指针. 触摸事件不会触发它.

看它活着 [codaworks.com (英语)](https://codaworks.com/)。 。 。 .

## 安装

用 npm 安装软件包 :

```shell
npm i @codaworks/react-glow
```

## 使用量

环绕任意编号 `<Glow>` a 中的组件 `<GlowCapture>` 用于跟踪鼠标位置.

```jsx
<GlowCapture>
  <span>This won't glow</span>
  <Glow color='purple'>
    <span className='text-black glow:text-glow/50 glow:bg-red-100'>
      This will glow purple when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>
```

儿童 `<Glow>` 可以给自己发光时的外观作风 你可能选择让一些孩子保持原样,或者用 `glow:` 变相风格.

价值 `color` 将作为 CSS 变量提供 `--glow-color`以及尾风 `glow` 颜色. 您可以通过任何有效的 CSS 颜色, 包括 `hsl()` 数值等. 当然,你可能选择使用其他颜色;你可以不使用 `color` 完全为道具.

## 尾风

添加尾风插件以解锁 `glow:` 变式和 `glow` 颜色

`tailwind.config.js`

```js
module.exports = {
  ...
  plugins: [
    require('@codaworks/react-glow/tailwind')
  ]
}
```

与 Tailwind 中的所有颜色一样,您可以通过在颜色后附加一个百分比来添加不透明性,例如 `bg-glow/20` 20%的不透明度.

## 香草CSS( 香草CSS)

您可以用香草 CSS 来塑造发光效果 :

```jsx
<GlowCapture>
  <span>This won't glow</span>
  <Glow color='hsl(338.69 100% 48.04%)'>
    <span className='glowable-text'>
      This will glow pink when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>
```

```css
.glowable-text {
  color: black;
}

[glow] .glowable-text {
  color: var(--glow-color);
}
```

## 归属

灵感来自 [这个推特](https://twitter.com/codepen/status/1696297659663888490)。 。 。 .

## 常见问题

### @codaworks/react-glow 是什么？

添加鼠标跟踪发光效果到 React 组件

### 如何安装 @codaworks/react-glow？

在项目目录运行 npm install @codaworks/react-glow，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）、tailwindcss（\>=3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @codaworks/react-glow 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @codaworks/react-glow 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @codaworks/react-glow 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=10。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @codaworks/react-glow 可以商用吗？

@codaworks/react-glow 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @codaworks/react-glow 的下载量有多少？

根据 npm 官方下载统计，@codaworks/react-glow 在 2026/10/10 – 2026/11/08 这 30 天内被下载 32,299 次，日均约 1,077 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @codaworks/react-glow 还在维护吗？

最新版本 1\.0\.6 发布于 2024/01/18（2 年前）；至今共发布 7 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/09/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。