g-react-brackets

- If you want the SVGViewer to fit it's container you will need some sort of hook to achieve that, like useWindowSize(), useComponentSize or your own custom solution
`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 (
matches={matches}
matchComponent={Match}
svgWrapper={({ children, ...props }) => (

{children}

)}
/>
);
};
`
_For more examples, please refer to the [Storybook][demo-url]_

$3

`
- Double Eliminations matches prop structure
`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
"is_winner": false,
"status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null
"name": "giacomo123"
},
{
"id": "9ea9ce1a-4794-4553-856c-9a3620c0531b",
"resultText": "LOST", // Any string works
"is_winner": 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
"is_winner": false,
"status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null
"name": "giacomo123"
},
{
"id": "9ea9ce1a-4794-4553-856c-9a3620c0531b",
"resultText": null,
"is_winner": true,
"status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY'
"name": "Ant"
}
]
}
...
]
}
`
- 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 specifically data-double-last-game-lower.ts and 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": "",
"is_winner": 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 / Participant States are defined in the exported constant MATCH_STATES
`js
import { MATCH_STATES } from '@g-loot/react-tournament-brackets';
// {
// PLAYED: 'PLAYED',
// NO_SHOW: 'NO_SHOW',
// WALK_OVER: 'WALK_OVER',
// NO_PARTY: 'NO_PARTY',
// DONE: 'DONE',
// SCORE_DONE: 'SCORE_DONE',
// };

`

_For more examples of accepted data, check out the mock data folder_

Theming and Styling

return (
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 }) => (
background={WhiteTheme.svgBackground}
SVGBackground={WhiteTheme.svgBackground}
width={finalWidth}
height={finalHeight}
{...props}
>
{children}

)}
/>
);
};
`


$3

#### Basic example of custom match component
`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 (
matches={simpleSmallBracket}
options={{
style: {
roundHeader: { backgroundColor: '#AAA' },
connectorColor: '#FF8C00',
connectorColorHighlight: '#000',
},
}}
svgWrapper={({ children, ...props }) => (
background="#FFF"
SVGBackground="#FFF"
width={finalWidth}
height={finalHeight}
{...props}
>
{children}

)}
matchComponent={({
match,
onMatchClick,
onPartyClick,
onMouseEnter,
onMouseLeave,
topParty,
bottomParty,
topWon,
bottomWon,
topHovered,
bottomHovered,
topText,
bottomText,
connectorColor,
computedStyles,
teamNameFallback,
resultFallback,
}) => (
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around',
color: '#000',
width: '100%',
height: '100%',
}}
>
onMouseEnter={() => onMouseEnter(topParty.code)}
style={{ display: 'flex' }}
>