# @bprogress/react 中文文档

规范地址：https://npmcn.com/package/%40bprogress/react/

版本：1\.2\.7
npm 元数据更新时间：2025-04-14T15:12:12.278Z
中文译文更新时间：2026-11-08T13:09:32.046Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bprogress/react
原文对照：https://npmcn.com/package/%40bprogress/react/?lang=original
项目主页：https://bprogress.vercel.app/docs/react/installation
源码仓库：https://github.com/imskyleen/bprogress#main

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

- 包体积（解压后）：157 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2025-02-19T21:15:38.958Z
- 最新版本发布：2025-04-14T15:12:12.079Z
- 近 30 天下载量：1374483（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 0 个）

## 中文简介

用 React 创建自己的 N 进步栏的工具

## 安装

```sh
npm install @bprogress/react
```

也可以使用：`pnpm add @bprogress/react`、`yarn add @bprogress/react`、`bun add @bprogress/react`

## README

# 反应进度

创建自己的 **进度栏** 与 **反应**

## 导入

```tsx
import { ProgressProvider } from '@bprogress/react';
```

这个 `@bprogress/react` 软件包是一个 **工具** 这使得您可以轻松管理一个进度栏,同时对您使用的路由器保持灵活. **浏览时不会自动启动进度栏**,所以你将不得不自己管理这个逻辑,除非你使用下面的一个集成.

### 反应框架集成

-   [下一个.js](https://bprogress.vercel.app/docs/next/installation)
-   [重混合](https://bprogress.vercel.app/docs/remix/installation)
-   再快点...

## 使用量

```tsx
<ProgressProvider>...</ProgressProvider>
```

## 示例

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ProgressProvider } from '@bprogress/react';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);
root.render(
  <React.StrictMode>
    <ProgressProvider>
      <App />
    </ProgressProvider>
  </React.StrictMode>,
);
```

```tsx
import { useProgress } from '@bprogress/react';

function App() {
  const { start, stop, pause, resume } = useProgress();

  return (
    <div className="App">
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
      <button onClick={pause}>Pause</button>
      <button onClick={resume}>Resume</button>
    </div>
  );
}

export default App;
```

## 有关文件的更多信息

转到 [文档](https://bprogress.vercel.app/docs/react/installation) 学习更多关于B进步.

## 问题

如果你遇到任何问题,不要犹豫 [打开一个问题](https://github.com/imskyleen/bprogress/issues) 或制作 PR [这里](https://github.com/imskyleen/bprogress)。 。 。 .

## 自由主义

麻省理工学院

## 常见问题

### @bprogress/react 是什么？

用 React 创建自己的 N 进步栏的工具

### 如何安装 @bprogress/react？

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

### @bprogress/react 支持 TypeScript 吗？

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

### @bprogress/react 支持 ESM 还是 CommonJS？

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

### @bprogress/react 可以商用吗？

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

### @bprogress/react 的下载量有多少？

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

### @bprogress/react 还在维护吗？

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