node.js - React package to generate Game Brackets with scoring

Question

I am current developing a gaming application similar to "https://smash.gg/" where users can create tournaments and host events. the brackets available in the tournament can be of different formats such as single elimination , double elimination and multiplayer. what I require is a NPM or JavaScript package that will automatically generate and update a tournaments brackets for a particular game based on the type of game and number of players . I have attached an image below for an idea of the final result I want .

saqib kafeel saqib kafeel · Accepted Answer · 2021-07-09T12:43:17

use react-brackets package for it,you just need to pass a objects array of your tournament and this package will draw brackets as you shown in image and of course you need to apply customize styling as per your provided picture

npm install --save react-brackets

or

yarn add --save react-brackets

The simplest usage of this component is

import { Bracket, RoundProps } from 'react-brackets';

const rounds: RoundProps[] = [
  {
    title: 'Round one',
    seeds: [
      {
        id: 1,
        date: new Date().toDateString(),
        teams: [{ name: 'Team A' }, { name: 'Team B' }],
      },
      {
        id: 2,
        date: new Date().toDateString(),
        teams: [{ name: 'Team C' }, { name: 'Team D' }],
      },
    ],
  },
  {
    title: 'Round one',
    seeds: [
      {
        id: 3,
        date: new Date().toDateString(),
        teams: [{ name: 'Team A' }, { name: 'Team C' }],
      },
    ],
  },
];

const Component = () => {
  return <Bracket rounds={rounds} />;
};

node.js - React package to generate Game Brackets with scoring

1 Answers