react-tournament-bracket

React components for rendering a tournament bracket

Demo

Go here

Install

yarn add react-tournament-bracket 

Usage

import {Bracket} from 'react-tournament-bracket';
import {render} from 'react-dom';

render(<Bracket game={game}/>, document.getElementById('app'));

BracketGenerator uses flexbox

The BracketGenerator uses flexbox classes provided by flexbox-css to wrap its generated brackets. If you are using BracketGenerator, you should include the flexbox-css, e.g.:

<link rel="stylesheet" href="https://cdn.rawgit.com/moodysalem/flexbox-css/e5a121cb493c0452509708a9fb0524c671f31b4e/dist/flexbox-css-min.css" integrity="sha384-W3cb5bRHJiWSSwBvBHgWXGH8SdPZU6tA7DAa0S0JHJdvRlBqeKWBya2Lu9zrUMXK" crossorigin="anonymous">

TODO

• Component documentation
• Better handling of mouse team highlighting (currently, when moving between teams in a particular game, the mouse events fire in inconsistent order and can result in the wrong team left highlighted)
• Consider simplifying the game model passed to this component
• Add tests