# @g-loot/react-tournament-brackets 中文文档

规范地址：https://npmcn.com/package/%40g-loot/react-tournament-brackets/

版本：1\.0\.31-rc
npm 元数据更新时间：2023-12-03T20:38:24.738Z
中文译文更新时间：2026-11-15T20:04:51.483Z
软件包许可：ISC

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

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

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

- 包体积（解压后）：818 kB，249 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^18\.1\.0，react-dom ^18\.1\.0，react-svg-pan-zoom ^3\.10\.0，styled-components ^4\.1\.3
- 首次发布：2021-06-23T07:42:06.959Z
- 最新版本发布：2023-12-03T20:38:24.528Z
- 近 30 天下载量：12584（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 0 个）

## 中文简介

一个可视化括号前导板的反应组件

## 安装

```sh
npm install @g-loot/react-tournament-brackets
```

也可以使用：`pnpm add @g-loot/react-tournament-brackets`、`yarn add @g-loot/react-tournament-brackets`、`bun add @g-loot/react-tournament-brackets`

## README

[![Contributors](https://img.shields.io/github/contributors/g-loot/react-tournament-brackets.svg?style=for-the-badge)](https://github.com/g-loot/react-tournament-brackets/graphs/contributors) [![Forks](https://img.shields.io/github/forks/g-loot/react-tournament-brackets.svg?style=for-the-badge)](https://github.com/g-loot/react-tournament-brackets/network/members) [![Stargazers](https://img.shields.io/github/stars/g-loot/react-tournament-brackets.svg?style=for-the-badge)](https://github.com/g-loot/react-tournament-brackets/stargazers) [![Issues](https://img.shields.io/github/issues/g-loot/react-tournament-brackets.svg?style=for-the-badge)](https://github.com/g-loot/react-tournament-brackets/issues)

  

### 反射锦标赛

直接执行反应中的单一去除和双去去除括号  
[**探索故事本 ”**](https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket)  
  
[查看 Live Demo](https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket) • 妇女 [报告错误](https://github.com/g-loot/react-tournament-brackets/issues) • 妇女 [请求特性](https://github.com/g-loot/react-tournament-brackets/issues)

目录

1.  [关于项目](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-about-the-project)
    -   [内设](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-built-with)
2.  [开始](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-getting-started)
    -   [安装](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-installation)
    -   [基本用途](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-basic-usage)
    -   [数据结构](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-data-structures)
    -   [设计与造型](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-theming-and-styling)

4.  [捐款](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-contributing)

-   [贡献者测试指南](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-contributer-testing-guide)

```
<li><a href="#acknowledgements">Acknowledgements</a></li>
```

## 关于项目

-   截图 框外的单个消除括号 [![Single elimination screenshot](https://npmcn.com/package/%40g-loot/react-tournament-brackets/images/screenshot_single.png)](https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket)
-   截图 框外的双消除括号 [![Double elimination screenshot](https://npmcn.com/package/%40g-loot/react-tournament-brackets/images/screenshot_double.png)](https://sleepy-kare-d8538d.netlify.app/?path=/story/components-doubleelim--double-elimination)

我在环球网络上搜索一个很好的组件库, 用于可视化单个消除括号或双消除括号, 但是大多数的这些组件都复杂了数据结构, 或不允许容易的造型, 所以我不得不建造我自己的, 决定与世界分享.

### 内设

您只需在工程中安装反应即可使用此工程 .

-   [反应](https://reactjs.org/)
-   [样式组件](https://styled-components.com/)

**说明:** 默认浏览器 ss 使用 [小型重置.css 软件包](https://github.com/jgthms/minireset.css/) 在故事书演示。 要完全控制匹配组件的外观, 您可以为此构建和提供自己的视图组件

## 开始

### 安装

这个项目在公共npm注册,这里是 [链接到 npm 页面](https://www.npmjs.com/package/@g-loot/react-tournament-brackets)

```sh
npm install @g-loot/react-tournament-brackets
```

## 基本用途

### 图书馆的基本情况

`import { SingleEliminationBracket, DoubleEliminationBracket, Match, MATCH_STATES, SVGViewer } from '@g-loot/react-tournament-brackets';`

| 构成部分 | 说明 |
| --- | :-- |
| 单一消除 括号 | 显示单一消除括号的组件 |
| 双消除 括号 | 显示双消除括号的组件 |
| 匹配 | 渲染匹配可被覆盖的默认组件 |
| MATCH 统计 | 包含 Match 状态和参与者状态的 enum 常数 |
| SVGviewer 服务器 | 在有平板和缩放功能的固定大小窗口中显示括号的可选组件 |

### 使用组件

此组件生成您所有括号匹配的 SVG, 您可以使用所提供的可选组件 `<SVGViewer />` 就像在下面的例子中将SVG包裹在一个固定大小的窗口中,带有平板和缩放功能,请注意,你也可以自由地提出自己的解决方案,允许用户轻松地浏览巨大的括号.

```js
import { SingleEliminationBracket, DoubleEliminationBracket, Match, SVGViewer } from '@g-loot/react-tournament-brackets';
export const DoubleElimination = () => (
  <DoubleEliminationBracket
    matches={matches}
    matchComponent={Match}
    svgWrapper={({ children, ...props }) => (
      <SVGViewer width={500} height={500} {...props}>
        {children}
      </SVGViewer>
    )}
  />
);
export const SingleElimination = () => (
  <SingleEliminationBracket
    matches={matches}
    matchComponent={Match}
    svgWrapper={({ children, ...props }) => (
      <SVGViewer width={500} height={500} {...props}>
        {children}
      </SVGViewer>
    )}
  />
);
```

-   如果你想要的话 `SVGViewer` 装上容器,你需要某种钩子 才能达到这个目的,比如 [使用 WindowSize ()](https://usehooks.com/useWindowSize/), (中文(简体) ), [组合大小](https://github.com/rehooks/component-size) 或您的自定义解决方案

```js
import { DoubleEliminationBracket, Match, SVGViewer } from '@g-loot/react-tournament-brackets';

export const DoubleElimination = () => {
  const [width, height] = useWindowSize();
  const finalWidth = Math.max(width - 50, 500);
  const finalHeight = Math.max(height - 100, 500);
  return (
    <DoubleEliminationBracket
      matches={matches}
      matchComponent={Match}
      svgWrapper={({ children, ...props }) => (
        <SVGViewer width={finalWidth} height={finalHeight} {...props}>
          {children}
        </SVGViewer>
      )}
    />
  );
};
```

_更多例子请参见 \[故事本\]\[demo-url\]_

### 数据结构

-   单笔冲销 `matches` 道具结构

```json
[
  ...,
  {
    "id": 260005,
    "name": "Final - Match",
    "nextMatchId": null, // Id for the nextMatch in the bracket, if it's final match it must be null OR undefined
    "tournamentRoundText": "4", // Text for Round Header
    "startTime": "2021-05-30",
    "state": "DONE", // 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'DONE' | 'SCORE_DONE' Only needed to decide walkovers and if teamNames are TBD (to be decided)
    "participants": [
      {
        "id": "c016cb2a-fdd9-4c40-a81f-0cc6bdf4b9cc", // Unique identifier of any kind
        "resultText": "WON", // Any string works
        "isWinner": false,
        "status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null
        "name": "giacomo123"
      },
      {
        "id": "9ea9ce1a-4794-4553-856c-9a3620c0531b",
        "resultText": null,
        "isWinner": true,
        "status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY'
        "name": "Ant"
      }
    ]
  }
  ...
]

```

-   双冲销 `matches` 道具结构

```json
{
  "upper": [
    ...,
    {
      "id": 260006, // Unique identifier of any kind
      "name": "Semi Final - Match",
      "nextMatchId": null,  // Id for the next match in upper bracket, if it's final match it must be null OR undefined
      "nextLooserMatchId": null,  // Id for the next match in lower bracket, if it's final match or a lower bracket match it must be null OR undefined
      "startTime": "2021-05-30",
      "state": "DONE", // 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'DONE' | 'SCORE_DONE' Only needed to decide walkovers and if teamNames are TBD (to be decided)
      "participants": [
        {
          "id": "c016cb2a-fdd9-4c40-a81f-0cc6bdf4b9cc", // Unique identifier of any kind
          "resultText": "WON", // Any string works
          "isWinner": false,
          "status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null
          "name": "giacomo123"
        },
        {
          "id": "9ea9ce1a-4794-4553-856c-9a3620c0531b",
          "resultText": "LOST", // Any string works
          "isWinner": true,
          "status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY'
          "name": "Ant"
        }
      ]
    }
    ...
  ],
  "lower": [
    ...,
    {
      "id": 260005,
      "name": "Semi Final - Match",
      "nextMatchId": 260006,
      "nextLooserMatchId": null,
      "tournamentRoundText": "4",
      "startTime": "2021-05-30",
      "state": "DONE", // 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'DONE' | 'SCORE_DONE' Only needed to decide walkovers and if teamNames are TBD (to be decided)
      "participants": [
        {
          "id": "c016cb2a-fdd9-4c40-a81f-0cc6bdf4b9cc", // Unique identifier of any kind
          "resultText": "WON", // Any string works
          "isWinner": false,
          "status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null
          "name": "giacomo123"
        },
        {
          "id": "9ea9ce1a-4794-4553-856c-9a3620c0531b",
          "resultText": null,
          "isWinner": true,
          "status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY'
          "name": "Ant"
        }
      ]
    }
    ...
  ]
}
```

-   双冲销 `matches` 道具结构 有双打决赛,保持同一种结构,并加入下个MatchId + 下个LooserMatchId,指指同个档次的新相配(决赛可以上下档次) . ưμ㼯A [模拟数据文件夹](https://github.com/g-loot/react-tournament-brackets/tree/master/src/mock-data) 具体 [数据-倒数倒数](https://github.com/g-loot/react-tournament-brackets/tree/master/src/mock-data/data-double-last-game-lower.ts) 财务报告和审定财务报表 [数据-double-last-game-upper-double-playflows.ts 双打 双打 双打](https://github.com/g-loot/react-tournament-brackets/tree/master/src/mock-data/data-double-last-game-upper-double-playoffs.ts) 编号

```json
{
  [upper|lower]: [
    ...,
    {
      "id": "WB R5 M1",
      "name": "WB R5 M1",
      "nextMatchId": "WB R6 M1",
      "nextLooserMatchId": "WB R6 M1",
      "startTime": null,
      "tournamentRound": "R5",
      "state": "SCORE_DONE",
      "participants": [
        {
          "id": "ddfee063-adde-4192-95d2-203eb2ebb8f7",
          "resultText": "",
          "isWinner": false,
          "status": "PLAYED",
          "name": "#1"
        }
      ]
    },
    {
      "id": "WB R6 M1",
      "name": "WB R6 M1",
      "nextMatchId": null,
      "nextLooserMatchId": null,
      "startTime": null,
      "tournamentRound": "R6",
      "state": "SCORE_DONE",
      "participants": []
    }
    ...,
  ]
}


```

-   匹配国/参与国在输出常数中定义 `MATCH_STATES`

```js
import { MATCH_STATES } from '@g-loot/react-tournament-brackets';
console.log(MATCH_STATES);
// {
//   PLAYED: 'PLAYED',
//   NO_SHOW: 'NO_SHOW',
//   WALK_OVER: 'WALK_OVER',
//   NO_PARTY: 'NO_PARTY',
//   DONE: 'DONE',
//   SCORE_DONE: 'SCORE_DONE',
// };

```

_更多已接受数据的例子,请查看 [模拟数据文件夹](https://github.com/g-loot/react-tournament-brackets/tree/master/src/mock-data)_

## 赛明和斯提林

此组件的默认主题为截图中的暗主题, 您可以使用此功能 `createTheme` 从库中导出以创建一个主题,然后传递到该主题上的单括号或双括号 `theme` 道具 少数说明:

-   一些颜色,如圆头和连接器 还没有绑在主题上,你需要 样式通过 `options` 现在手动的道具,在不远的将来,他们也会被绑在主题上!

#### 完整自定义主题示例 :

```js
import { SingleEliminationBracket, Match, SVGViewer, createTheme } from '@g-loot/react-tournament-brackets';

const WhiteTheme = createTheme({
  textColor: { main: '#000000', highlighted: '#07090D', dark: '#3E414D' },
  matchBackground: { wonColor: '#daebf9', lostColor: '#96c6da' },
  score: {
    background: { wonColor: '#87b2c4', lostColor: '#87b2c4' },
    text: { highlightedWonColor: '#7BF59D', highlightedLostColor: '#FB7E94' },
  },
  border: {
    color: '#CED1F2',
    highlightedColor: '#da96c6',
  },
  roundHeader: { backgroundColor: '#da96c6', fontColor: '#000' },
  connectorColor: '#CED1F2',
  connectorColorHighlight: '#da96c6',
  svgBackground: '#FAFAFA',
});

export const WhiteThemeBracket = () => {
  const [width, height] = useWindowSize();
  const finalWidth = Math.max(width - 50, 500);
  const finalHeight = Math.max(height - 100, 500);

  return (
    <SingleEliminationBracket
      matches={simpleSmallBracket}
      matchComponent={Match}
      theme={WhiteTheme}
      options={{
        style: {
          roundHeader: {
            backgroundColor: WhiteTheme.roundHeader.backgroundColor,
            fontColor: WhiteTheme.roundHeader.fontColor,
          },
          connectorColor: WhiteTheme.connectorColor,
          connectorColorHighlight: WhiteTheme.connectorColorHighlight,
        },
      }}
      svgWrapper={({ children, ...props }) => (
        <SvgViewer
          background={WhiteTheme.svgBackground}
          SVGBackground={WhiteTheme.svgBackground}
          width={finalWidth}
          height={finalHeight}
          {...props}
        >
          {children}
        </SvgViewer>
      )}
    />
  );
};
```

### 如果主题对您还不够, 您总是可以提供您自己的 Match 视图组件, 并使用传递到它的道具来覆盖匹配视图渲染, 您需要再次使用 round 头和连接线来样式 `options` 道具

#### 自定义匹配组件的基本示例

```js
import { SingleEliminationBracket, SVGViewer } from '@g-loot/react-tournament-brackets';

export const CustomMatchBracket = () => {
  const [width, height] = useWindowSize();
  const finalWidth = Math.max(width - 50, 500);
  const finalHeight = Math.max(height - 100, 500);
  return (
    <SingleEliminationBracket
      matches={simpleSmallBracket}
      options={{
        style: {
          roundHeader: { backgroundColor: '#AAA' },
          connectorColor: '#FF8C00',
          connectorColorHighlight: '#000',
        },
      }}
      svgWrapper={({ children, ...props }) => (
        <SvgViewer
          background="#FFF"
          SVGBackground="#FFF"
          width={finalWidth}
          height={finalHeight}
          {...props}
        >
          {children}
        </SvgViewer>
      )}
      matchComponent={({
        match,
        onMatchClick,
        onPartyClick,
        onMouseEnter,
        onMouseLeave,
        topParty,
        bottomParty,
        topWon,
        bottomWon,
        topHovered,
        bottomHovered,
        topText,
        bottomText,
        connectorColor,
        computedStyles,
        teamNameFallback,
        resultFallback,
      }) => (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-around',
            color: '#000',
            width: '100%',
            height: '100%',
          }}
        >
          <div
            onMouseEnter={() => onMouseEnter(topParty.id)}
            style={{ display: 'flex' }}
          >
            <div>{topParty.name || teamNameFallback}</div>
            <div>{topParty.resultText ?? resultFallback(topParty)}</div>
          </div>
          <div
            style={{ height: '1px', width: '100%', background: '#FF8C00' }}
          />
          <div
            onMouseEnter={() => onMouseEnter(bottomParty.id)}
            style={{ display: 'flex' }}
          >
            <div>{bottomParty.name || teamNameFallback}</div>
            <div>{bottomParty.resultText ?? resultFallback(topParty)}</div>
          </div>
        </div>
      )}
    />
  );
};
```

_更多的例子,请查看\[活的故事本\]\[demo-url\]_

## 许可证

在GNU LGPL v2.1 许可证下分发. 见 `LICENSE` 更多信息.

## 捐款

贡献使得开放源代码社区成为了如此惊人的学习,激励和创造的地方. 你所做的任何贡献 **非常感谢**。 。 。 .

1.  项目叉
2.  创建您的特性分支( E)`git checkout -b feature/AmazingFeature`(中文(简体) )
3.  用于自动反馈, 如果您正在编辑组件或添加新组件运行 `npm run dev`
4.  根据 [贡献者测试指南](https://npmcn.com/package/%40g-loot/react-tournament-brackets/#readme-contributer-testing-guide)
5.  提交更改( E)`git commit -m 'Add some AmazingFeature'`(中文(简体) )
6.  推动到该处`git push origin feature/AmazingFeature`(中文(简体) )
7.  打开拉请求

## 贡献者测试指南

### 单元测试和起伏

-   运行 : `npm run test`
-   运行 : `npm run lint`

### 检查故事书的作品

-   运行 : `npm run build-storybook` 检查它是否正确构建了故事本演示网站

### 检查包在被测试项目消耗时是否有效

-   运行 : `npm run test-lib-build` 用于测试软件包的构建和包装为 npm 软件包的正确性
-   双方都遵循指南 [下一个js](https://npmcn.com/package/%40g-loot/react-tournament-brackets/demos/nextjs/README.md) 财务报告和审定财务报表 [创建- 反应- 应用程序](https://npmcn.com/package/%40g-loot/react-tournament-brackets/demos/create-react-app/README.md) 项目实例

## 鸣谢

-   启发用户将括号内样式化的组件设置为主题,从而曝光库 [重现数据表组件](https://github.com/jbetancur/react-data-table-component/)
-   可选组件 SVGViewer 用于缩放和平整括号的库 [反应 SVG 泛缩放](https://github.com/chrvadala/react-svg-pan-zoom)

## 常见问题

### @g-loot/react-tournament-brackets 是什么？

一个可视化括号前导板的反应组件

### 如何安装 @g-loot/react-tournament-brackets？

在项目目录运行 npm install @g-loot/react-tournament-brackets，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.1\.0）、react-dom（^18\.1\.0）、react-svg-pan-zoom（^3\.10\.0）、styled-components（^4\.1\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @g-loot/react-tournament-brackets 支持 TypeScript 吗？

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

### @g-loot/react-tournament-brackets 支持 ESM 还是 CommonJS？

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

### @g-loot/react-tournament-brackets 可以商用吗？

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

### @g-loot/react-tournament-brackets 的下载量有多少？

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

### @g-loot/react-tournament-brackets 还在维护吗？

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