reacket

React single elimination tournament brackets
Example https://jez321.github.io/reacket/

Install

npm install --save reacket

Usage

Prepare an array of matches in the following format:

[
{
"id": 1,
"round": 1,
"match": 1,
"players": [
{
"id": 1,
"name": "Player 1 name",
"seed": 1
},
{
"id": 2,
"name": "Player 2 name",
"seed": 8
}
],
"score": [
0,
1
]
},
...
]

At the moment, brackets should be full i.e. the number of matches in a round = 2^(Total rounds - Current round).
See data/testData.json for an example.

importReactfrom'react';importReacketfrom'reacket';constExample=(matches)=>(<Reacketmatches={matches}/>)

Customizing the theme

Override the appropriate css classes, making sure to import your theme after reacket.

importReacketfrom'reacket';import'./reacket.theme.css';

Refer to the example project for a sample custom theme implementation.

Example site

cd example
npm start

Access localhost:3000 in your browser.

Note: If you get a hooks error when accessing the example site follow the steps in this StackOverflow answer. https://stackoverflow.com/a/65259365

License

MIT © jez321