Newly Purchased Memories

    react-tournament-bracket
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.4 • Public • Published

    npm Build Status react-tournament-bracket

    image

    React components for rendering a tournament bracket

    Demo

    Go here

    Install

    npm i react-tournament-bracket 
    

    Usage

    These bracket components rely on a cyclical graph data structure.
    Thus, to render a bracket, you pass in only the final game. If you have a set of games matching the model, you can pass them all in to render all the brackets. The Bracket Generator will discover which games are considered 'finals' and order the rendered brackets by the height of the winning path.

    import { Bracket } from 'react-tournament-bracket';
    import { render } from 'react-dom';
     
    render(<Bracket game={game}/>, document.getElementById('app'));

    Development

    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

    Install

    npm i react-tournament-bracket

    DownloadsWeekly Downloads

    131

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    28.9 kB

    Total Files

    19

    Last publish

    Collaborators

    • moodysalem