\n \n\n\n\n\n\n## About The Project\n- Screenshot Of single elimination bracket out of the box\n[![Single elimination screenshot][single-bracket-screenshot]][single-demo-url]\n- Screenshot Of double elimination bracket out of the box\n[![Double elimination screenshot][double-bracket-screenshot]][double-demo-url]\n- Screenshot Of single elimination bracket with third place match\n[![Third place match screenshot][third-place-screenshot]][single-demo-url]\n- Screenshot Of single elimination bracket with winners column (1st, 2nd, 3rd place)\n[![Winners column screenshot][winners-column-screenshot]][single-demo-url]\n- Screenshot Theme example\n[![Screenshot theme][screenshot-theme-screenshot]][single-demo-url]\n\nI was scouring the world wide web for a good component library for visualizing single elimination brackets or double elimination brackets but most of them had complicated data structures or didn't allow for easy styling, and so I had to build my own, and decided to share it with the world.\n### Built With\n\nYou only need to have react installed in your project to use this project.\n* [React](https://reactjs.org/)\n* [Styled Components](https://styled-components.com/)\n\n\n**Note:** default browser css is reset using the [minireset.css package](https://github.com/jgthms/minireset.css/) in the storybook demos. To fully control what the match component looks like you can build and supply your own view component for it \n## Getting Started\n### Installation\n This project is hosted on the public npm registry, here's the [link to the npm page](https://www.npmjs.com/package/@cm3tahkuh/react-tournament-brackets)\n ```sh\n npm install @cm3tahkuh/react-tournament-brackets\n ```\n\n\n## Basic Usage\n\n### Basics of the library\n`import { SingleEliminationBracket, DoubleEliminationBracket, Match, MATCH_STATES, SVGViewer } from '@cm3tahkuh/react-tournament-brackets';`\n| Component | Description |\n| ------------- |:-------------|\n| SingleEliminationBracket | Component for displaying single elimination bracket |\n| DoubleEliminationBracket | Component for displaying double elimination bracket |\n| Match | Default component for rendering matches that can be overridden |\n| MATCH_STATES | Constant containing enum for Match states and Participants statuses |\n| SVGViewer | Optional component for displaying the bracket in a fixed size window with panning and zooming functionality |\n\n### Using the components\nThis component generates an SVG of all your bracket matches, you can use the supplied optional component `` like in the following example to wrap the SVG in a fixed size window with panning and zooming functionality, Note that you're also free to come up with your own solution for allowing the user to navigate giant brackets with ease.\n```js\nimport { SingleEliminationBracket, DoubleEliminationBracket, Match, SVGViewer } from '@cm3tahkuh/react-tournament-brackets';\nexport const DoubleElimination = () => (\n (\n \n {children}\n \n )}\n />\n);\nexport const SingleElimination = () => (\n (\n \n {children}\n \n )}\n />\n);\n```\n\n- Single elimination brackets now support displaying a third place match and a winners column showing final placements (1st, 2nd, 3rd place)\n\n[![Third place match][third-place-screenshot]][single-demo-url]\n[![Winners column][winners-column-screenshot]][single-demo-url]\n\n```js\nimport { SingleEliminationBracket, Match, SVGViewer } from '@g-loot/react-tournament-brackets';\n\nexport const SingleEliminationWithThirdPlace = () => (\n (\n \n {children}\n \n )}\n />\n);\n```\n\n- If you want the `SVGViewer` to fit it's container you will need some sort of hook to achieve that, like [useWindowSize()](https://usehooks.com/useWindowSize/), [useComponentSize](https://github.com/rehooks/component-size) or your own custom solution\n```js\nimport { DoubleEliminationBracket, Match, SVGViewer } from '@cm3tahkuh/react-tournament-brackets';\n\nexport const DoubleElimination = () => {\n const [width, height] = useWindowSize();\n const finalWidth = Math.max(width - 50, 500);\n const finalHeight = Math.max(height - 100, 500);\n return (\n (\n \n {children}\n \n )}\n />\n );\n};\n```\n_For more examples, please refer to the [Storybook][demo-url]_\n\n### Data structures\n- Single Eliminations `matches` prop structure\n```json\n[\n ...,\n {\n \"id\": 260005,\n \"name\": \"Final - Match\",\n \"nextMatchId\": null, // Id for the nextMatch in the bracket, if it's final match it must be null OR undefined\n \"tournamentRoundText\": \"4\", // Text for Round Header\n \"startTime\": \"2021-05-30\",\n \"state\": \"DONE\", // 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'DONE' | 'SCORE_DONE' Only needed to decide walkovers and if teamNames are TBD (to be decided)\n \"participants\": [\n {\n \"id\": \"c016cb2a-fdd9-4c40-a81f-0cc6bdf4b9cc\", // Unique identifier of any kind\n \"resultText\": \"WON\", // Any string works\n \"isWinner\": false,\n \"status\": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null\n \"name\": \"giacomo123\"\n },\n {\n \"id\": \"9ea9ce1a-4794-4553-856c-9a3620c0531b\",\n \"resultText\": null,\n \"isWinner\": true,\n \"status\": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY'\n \"name\": \"Ant\"\n }\n ]\n }\n ...\n]\n\n```\n- Single Eliminations with Third Place Match and Winners Column\nTo enable the third place match and winners column, you need to:\n 1. Add a match with `isThirdPlace: true` or set `tournamentRoundText` to match \"third\" or \"3rd place\"\n 2. Set `showThirdPlace={true}` and `showWinnersColumn={true}` props on `SingleEliminationBracket`\n```json\n[\n ...,\n {\n \"id\": 3,\n \"name\": \"Grand Final\",\n \"nextMatchId\": null,\n \"tournamentRoundText\": \"Final\",\n \"state\": \"DONE\",\n \"participants\": [\n {\n \"id\": \"team-a\",\n \"name\": \"Team A\",\n \"isWinner\": true,\n \"resultText\": \"3\"\n },\n {\n \"id\": \"team-b\",\n \"name\": \"Team B\",\n \"isWinner\": false,\n \"resultText\": \"2\"\n }\n ]\n },\n {\n \"id\": 4,\n \"name\": \"Third Place\",\n \"nextMatchId\": null,\n \"tournamentRoundText\": \"3rd Place\",\n \"state\": \"DONE\",\n \"isThirdPlace\": true,\n \"participants\": [\n {\n \"id\": \"team-c\",\n \"name\": \"Team C\",\n \"isWinner\": true,\n \"resultText\": \"2\"\n },\n {\n \"id\": \"team-d\",\n \"name\": \"Team D\",\n \"isWinner\": false,\n \"resultText\": \"1\"\n }\n ]\n }\n]\n```\n\n- Double Eliminations `matches` prop structure\n```json\n{\n \"upper\": [\n ...,\n {\n \"id\": 260006, // Unique identifier of any kind\n \"name\": \"Semi Final - Match\",\n \"nextMatchId\": null, // Id for the next match in upper bracket, if it's final match it must be null OR undefined\n \"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\n \"startTime\": \"2021-05-30\",\n \"state\": \"DONE\", // 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'DONE' | 'SCORE_DONE' Only needed to decide walkovers and if teamNames are TBD (to be decided)\n \"participants\": [\n {\n \"id\": \"c016cb2a-fdd9-4c40-a81f-0cc6bdf4b9cc\", // Unique identifier of any kind\n \"resultText\": \"WON\", // Any string works\n \"isWinner\": false,\n \"status\": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null\n \"name\": \"giacomo123\"\n },\n {\n \"id\": \"9ea9ce1a-4794-4553-856c-9a3620c0531b\",\n \"resultText\": \"LOST\", // Any string works\n \"isWinner\": true,\n \"status\": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY'\n \"name\": \"Ant\"\n }\n ]\n }\n ...\n ],\n \"lower\": [\n ...,\n {\n \"id\": 260005,\n \"name\": \"Semi Final - Match\",\n \"nextMatchId\": 260006,\n \"nextLooserMatchId\": null,\n \"tournamentRoundText\": \"4\",\n \"startTime\": \"2021-05-30\",\n \"state\": \"DONE\", // 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'DONE' | 'SCORE_DONE' Only needed to decide walkovers and if teamNames are TBD (to be decided)\n \"participants\": [\n {\n \"id\": \"c016cb2a-fdd9-4c40-a81f-0cc6bdf4b9cc\", // Unique identifier of any kind\n \"resultText\": \"WON\", // Any string works\n \"isWinner\": false,\n \"status\": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null\n \"name\": \"giacomo123\"\n },\n {\n \"id\": \"9ea9ce1a-4794-4553-856c-9a3620c0531b\",\n \"resultText\": null,\n \"isWinner\": true,\n \"status\": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY'\n \"name\": \"Ant\"\n }\n ]\n }\n ...\n ]\n}\n```\n- Double Eliminations `matches` prop structure with double finals, Keep the same structure and add a nextMatchId + nextLooserMatchId pointing to a new match in the same bracket (the finals can be in upper or in lower bracket) _For more examples of valid double finals data, check out the [mock data folder](https://github.com/cm3tahkuh/react-tournament-brackets/tree/master/src/mock-data) specifically [data-double-last-game-lower.ts](https://github.com/cm3tahkuh/react-tournament-brackets/tree/master/src/mock-data/data-double-last-game-lower.ts) and [data-double-last-game-upper-double-playoffs.ts](https://github.com/cm3tahkuh/react-tournament-brackets/tree/master/src/mock-data/data-double-last-game-upper-double-playoffs.ts) _\n```json\n{\n [upper|lower]: [\n ...,\n {\n \"id\": \"WB R5 M1\",\n \"name\": \"WB R5 M1\",\n \"nextMatchId\": \"WB R6 M1\",\n \"nextLooserMatchId\": \"WB R6 M1\",\n \"startTime\": null,\n \"tournamentRound\": \"R5\",\n \"state\": \"SCORE_DONE\",\n \"participants\": [\n {\n \"id\": \"ddfee063-adde-4192-95d2-203eb2ebb8f7\",\n \"resultText\": \"\",\n \"isWinner\": false,\n \"status\": \"PLAYED\",\n \"name\": \"#1\"\n }\n ]\n },\n {\n \"id\": \"WB R6 M1\",\n \"name\": \"WB R6 M1\",\n \"nextMatchId\": null,\n \"nextLooserMatchId\": null,\n \"startTime\": null,\n \"tournamentRound\": \"R6\",\n \"state\": \"SCORE_DONE\",\n \"participants\": []\n }\n ...,\n ]\n}\n\n\n```\n- Match / Participant States are defined in the exported constant `MATCH_STATES`\n```js\nimport { MATCH_STATES } from '@cm3tahkuh/react-tournament-brackets';\nconsole.log(MATCH_STATES);\n// {\n// PLAYED: 'PLAYED',\n// NO_SHOW: 'NO_SHOW',\n// WALK_OVER: 'WALK_OVER',\n// NO_PARTY: 'NO_PARTY',\n// DONE: 'DONE',\n// SCORE_DONE: 'SCORE_DONE',\n// };\n\n```\n\n_For more examples of accepted data, check out the [mock data folder](https://github.com/cm3tahkuh/react-tournament-brackets/tree/master/src/mock-data)_\n\n\n## Theming and Styling\nThis component's default theme is the dark theme in the screenshot, you can use the function `createTheme` which is exported from the library to create a theme and then pass it to either single or double bracket on the `theme` prop\n\n### Available Themes\nThe library includes several pre-built themes:\n- **Default Theme**: Dark theme with blue accents (default)\n- **White Theme**: Clean white theme with neutral colors\n- **Gloot Theme**: Purple-themed dark theme\n- **Screenshot Theme**: Light blue theme with screenshot-like appearance, perfect for documentation and presentations\n\n[![Screenshot Theme][screenshot-theme-screenshot]][single-demo-url]\n\n#### Using Pre-built Themes\nIf you want to use a pre-built theme like ScreenshotTheme, you can import it from the library (if exported) or create it using `createTheme`:\n```js\nimport { SingleEliminationBracket, Match, SVGViewer, createTheme } from '@cm3tahkuh/react-tournament-brackets';\n\nconst ScreenshotTheme = createTheme({\n textColor: { main: '#0F172A', highlighted: '#0B3A75', dark: '#1E293B' },\n matchBackground: { wonColor: '#E6F0FF', lostColor: '#F0F6FF' },\n score: {\n background: { wonColor: '#D4E6FF', lostColor: '#D4E6FF' },\n text: { highlightedWonColor: '#0B3A75', highlightedLostColor: '#0B3A75' },\n },\n border: { color: '#B7C5F3', highlightedColor: '#334155' },\n roundHeader: { backgroundColor: '#CFE3FF', fontColor: '#0F172A' },\n roundHeaders: { background: '#CFE3FF' },\n connectorColor: '#334155',\n connectorColorHighlight: '#1F2937',\n svgBackground: '#E6F0FF',\n});\n\nexport const ScreenshotThemeBracket = () => (\n (\n \n {children}\n \n )}\n />\n);\n```\n\nA few notes: \n- Some colors like the roundHeaders, and connectors aren't tied to the theme yet, you'll need to style those through the `options` prop manually for now, In the very near future they will be tied to the theme as well!\n#### Full Example of custom theming:\n```js\nimport { SingleEliminationBracket, Match, SVGViewer, createTheme } from '@cm3tahkuh/react-tournament-brackets';\n\nconst WhiteTheme = createTheme({\n textColor: { main: '#000000', highlighted: '#07090D', dark: '#3E414D' },\n matchBackground: { wonColor: '#daebf9', lostColor: '#96c6da' },\n score: {\n background: { wonColor: '#87b2c4', lostColor: '#87b2c4' },\n text: { highlightedWonColor: '#7BF59D', highlightedLostColor: '#FB7E94' },\n },\n border: {\n color: '#CED1F2',\n highlightedColor: '#da96c6',\n },\n roundHeader: { backgroundColor: '#da96c6', fontColor: '#000' },\n connectorColor: '#CED1F2',\n connectorColorHighlight: '#da96c6',\n svgBackground: '#FAFAFA',\n});\n\nexport const WhiteThemeBracket = () => {\n const [width, height] = useWindowSize();\n const finalWidth = Math.max(width - 50, 500);\n const finalHeight = Math.max(height - 100, 500);\n\n return (\n (\n \n {children}\n \n )}\n />\n );\n};\n```\n### If themes aren't enough for you you can always supply your own Match view component and use the props passed to it to override the match view rendering, Again you'll need to style the round headers and connector lines using `options` prop\n\n#### Basic example of custom match component\n```js\nimport { SingleEliminationBracket, SVGViewer } from '@cm3tahkuh/react-tournament-brackets';\n\nexport const CustomMatchBracket = () => {\n const [width, height] = useWindowSize();\n const finalWidth = Math.max(width - 50, 500);\n const finalHeight = Math.max(height - 100, 500);\n return (\n (\n \n {children}\n \n )}\n matchComponent={({\n match,\n onMatchClick,\n onPartyClick,\n onMouseEnter,\n onMouseLeave,\n topParty,\n bottomParty,\n topWon,\n bottomWon,\n topHovered,\n bottomHovered,\n topText,\n bottomText,\n connectorColor,\n computedStyles,\n teamNameFallback,\n resultFallback,\n }) => (\n \n onMouseEnter(topParty.id)}\n style={{ display: 'flex' }}\n >\n
\n \n \n )}\n />\n );\n};\n```\n\n\n_For more examples, checkout the [live storybook][demo-url]_\n\n\n\n\n## License\n\nDistributed under the GNU LGPL v2.1 License. See `LICENSE` for more information.\n\n\n\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\n\n## Acknowledgements\n* Inspiration for allowing user to theme the bracket utlizing styled-components wthout exposing the library from [React Data Table Component](https://github.com/jbetancur/react-data-table-component/)\n* Library used for the optional component SVGViewer for zooming and panning the bracket [React SVG Pan Zoom](https://github.com/chrvadala/react-svg-pan-zoom)\n\n\n\n\n\n\n\n[contributors-shield]: https://img.shields.io/github/contributors/cm3tahkuh/react-tournament-brackets.svg?style=for-the-badge\n[contributors-url]: https://github.com/cm3tahkuh/react-tournament-brackets/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/cm3tahkuh/react-tournament-brackets.svg?style=for-the-badge\n[forks-url]: https://github.com/cm3tahkuh/react-tournament-brackets/network/members\n[stars-shield]: https://img.shields.io/github/stars/cm3tahkuh/react-tournament-brackets.svg?style=for-the-badge\n[stars-url]: https://github.com/cm3tahkuh/react-tournament-brackets/stargazers\n[issues-shield]: https://img.shields.io/github/issues/cm3tahkuh/react-tournament-brackets.svg?style=for-the-badge\n[issues-url]: https://github.com/cm3tahkuh/react-tournament-brackets/issues\n[single-bracket-screenshot]: images/screenshot_single.png\n[double-bracket-screenshot]: images/screenshot_double.png\n[third-place-screenshot]: images/screenshot_third_place.png\n[winners-column-screenshot]: images/screenshot_winners_column.png\n[screenshot-theme-screenshot]: images/screenshot_theme.png\n\n[single-demo-url]: https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket\n[double-demo-url]: https://sleepy-kare-d8538d.netlify.app/?path=/story/components-doubleelim--double-elimination\n","readmeFilename":"readme.md"}