react-svg-tournament-bracket

Customizable tournament brackets for React

Installation

npm install react-svg-tournament-bracket

Usage

Here's an example of basic usage with four teams starting at the semi final round:

import React from "react";
import TournamentBracket from "react-svg-tournament-bracket";

const MyBracket = () => {
  const matches = [
    {
      homeTeamName: "Team A",
      awayTeamName: "Team B",
      round: 1,
      matchNumber: 1,
    },
    {
      homeTeamName: "Team C",
      awayTeamName: "Team D",
      round: 1,
      matchNumber: 2,
    },
    {
      homeTeamName: "Winner Match 1",
      awayTeamName: "Winner Match 2",
      round: 2,
      matchNumber: 3,
    },
  ];

  return <TournamentBracket matches={matches} />;
};

Currently this package only correctly displays even brackets (total teams must be an exponentiation of 2). If you need to display an uneven bracket consider using multiple brackets, one for the preliminary round, one for a losers/secondary bracket. If an uneven bracket is still needed then using portrait mode will keep it the most organized.

More examples can be seen at Ultimate Scoreboard

The Match Object

The matches prop must be an array of objects, with the following required properties:

• homeTeamName: string

  the name of the home team

• awayTeamName: string

  the name of the away team

• round: integer

  round should start at 1 and increment by 1. Each subsequent round should have half the number of matches as the previous round to keep the bracket even. There should only be a single match in the final round.

• matchNumber: integer

  matchNumber should be unique within a round. It will be used to display the matches in order. matchNumber 1 will display directly above matchNumber 2 and it should be expected that the winners of those two matches will play each other in the next round.

There are also several optional properties which are used:

• dateTime: any

  this value is used in conjuction with the dateTimeFormatter prop to display text in between the two teams of a match. It is normal to put the date and time of the match here but this can be used for anything (stadium name, matchup record, etc)

• homeTeamAbbreviation: string

• awayTeamAbbreviation: string

  max 6 character abbreviation of the team name

• matchComplete: boolean

  if true the scores will be displayed next to each team name

• matchAccepted: boolean

  if true the winner of the match (calculated from homeTeamScore vs awayTeamScore with PKs as a tiebreaker) will display in bold

• homeTeamScore: integer

• awayTeamScore: integer

  the score of the each team. Used for bolding the winning team

• homeTeamPKs: integer

• awayTeamPKs: integer

  if the match was tied and a team won on PKs the winning team will be bolded

• homeTeamLogo: string (url location of image)

• awayTeamLogo: string (url location of image)

  if provided will display a square image next to the team name on the bracket. Must be the full path to the image.

  Props

License

MIT