@g-loot/react-tournament-brackets

中文文档

1.0.31-rc发布于 2023/12/04ISCTypeScriptESM + CJS近 30 天下载 1.3万

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

文档目录18 节

反射锦标赛
关于项目
内设
开始
安装
基本用途
图书馆的基本情况
使用组件
数据结构
赛明和斯提林
如果主题对您还不够, 您总是可以提供您自己的 Match 视图组件, 并使用传递到它的道具来覆盖匹配视图渲染, 您需要…
许可证
捐款
贡献者测试指南
单元测试和起伏
检查故事书的作品
检查包在被测试项目消耗时是否有效
鸣谢

反射锦标赛

直接执行反应中的单一去除和双去去除括号
探索故事本 ”

查看 Live Demo • 妇女报告错误 • 妇女请求特性

关于项目
- 内设
开始
捐款

贡献者测试指南

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

关于项目

截图框外的单个消除括号
截图框外的双消除括号

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

内设

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

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

开始

安装

这个项目在公共npm注册,这里是链接到 npm 页面

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包裹在一个固定大小的窗口中,带有平板和缩放功能,请注意,你也可以自由地提出自己的解决方案,允许用户轻松地浏览巨大的括号.

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 (), (中文(简体) ), 组合大小或您的自定义解决方案

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 道具结构

[
  ...,
  {
    "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 道具结构

{
  "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 模拟数据文件夹具体数据-倒数倒数财务报告和审定财务报表数据-double-last-game-upper-double-playflows.ts 双打双打双打编号

{
  [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

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',
// };

更多已接受数据的例子,请查看模拟数据文件夹

赛明和斯提林

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

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

完整自定义主题示例 :

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` 道具

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

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 更多信息.

捐款

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

项目叉
创建您的特性分支( E)git checkout -b feature/AmazingFeature(中文(简体) )
用于自动反馈, 如果您正在编辑组件或添加新组件运行 npm run dev
根据贡献者测试指南
提交更改( E)git commit -m 'Add some AmazingFeature'(中文(简体) )
推动到该处git push origin feature/AmazingFeature(中文(简体) )
打开拉请求

贡献者测试指南

单元测试和起伏

运行 : npm run test
运行 : npm run lint

检查故事书的作品

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

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

运行 : npm run test-lib-build 用于测试软件包的构建和包装为 npm 软件包的正确性
双方都遵循指南下一个js 财务报告和审定财务报表创建- 反应- 应用程序项目实例

鸣谢

启发用户将括号内样式化的组件设置为主题,从而曝光库重现数据表组件
可选组件 SVGViewer 用于缩放和平整括号的库反应 SVG 泛缩放

版本与发布记录

@g-loot/react-tournament-brackets 共发布 43 个版本，首次发布于 2021/06/23；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`1.0.31-rc`latest	2023/12/04	2 年前
`1.0.30`	2023/06/11	3 年前
`1.0.29`	2023/06/11	3 年前
`1.0.28`	2023/03/05	3 年前
`1.0.27`	2023/02/27	3 年前
`1.0.26`	2023/02/27	3 年前

关于 @g-loot/react-tournament-brackets 的常见问题

@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 和提交记录判断。

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

pnpmpnpm add @g-loot/react-tournament-brackets
yarnyarn add @g-loot/react-tournament-brackets
bunbun add @g-loot/react-tournament-brackets

peer 依赖react ^18.1.0react-dom ^18.1.0react-svg-pan-zoom ^3.10.0styled-components ^4.1.3

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

12,584

约 1.3万次日均 419 次

统计周期 2026/10/16 – 2026/11/14
数据来自 npm 官方下载统计，今天更新

最新版本1.0.31-rc发布于 2 年前

开源许可ISC宽松许可

包体积818 kB249 个文件 · 解压后

运行依赖1 个另有 4 个 peer 依赖

模块格式ESM + CJS

TypeScript自带类型

发布版本43 个近 12 个月 0 个

首次发布2021/06/235 年前

元数据更新2023/12/04

每一个软件包背后，
都有分享与创造的人。