react-svg-tournament-bracket

Customizable tournament brackets for React

Release Notes

1.1.0

• Added dummyMatch property to Match Object allowing for uneven bracket display (see Complex Examples section).
• Removed unnecessary connecting lines between matches on larger brackets making for a cleaner look.

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} />;
};

The component can now handle uneven brackets using the dummyMatch property on the Match Object. The length of your matches array should stil be an exponentiation of 2 but set the dummyMatch property to true for matches where there are no teams. These matches will take up the space where the match would go, causing the bracket to display evenly.

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.

  dummyMatch: boolean

  if true then the match will not be displayed but the space will be filled with the background color. Use this property to create uneven brackets by creating placeholder matches.

  Props

Complex Examples

Uneven bracket using dummyMatch property

This is how to display an uneven bracket with a lead in round. The entire quarter final round (round 1) needs to be included, but all the placeholder matches have the dummyMatch property set to true. The matchNumber property is only used to sort matches within each round, so they can be duplicated in the next round. So here we are able to number the placeholder matches for correct sorting while also keeping more logical match numbering for real matches on the bracket display.

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,
    },
    {
      round: 1,
      matchNumber: 2,
      dummyMatch: true,
    },
    {
      round: 1,
      matchNumber: 3,
      dummyMatch: true,
    },
    {
      round: 1,
      matchNumber: 4,
      dummyMatch: true,
    },
    {
      homeTeamName: "Winner Match 1",
      awayTeamName: "Team C",
      round: 2,
      matchNumber: 2,
    },
    {
      homeTeamName: "Team D",
      awayTeamName: "Team E",
      round: 2,
      matchNumber: 3,
    },
    {
      homeTeamName: "Winner Match 2",
      awayTeamName: "Winner Match 3",
      round: 3,
      matchNumber: 4,
    },
  ];

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

License

MIT