react-simple-bracket

React component that renders single elimination bracket.

Installation

npm i react-simple-bracket

Usage

To render a bracket, you pass specified data format. Where Data format must be like:

const game = [
  [
    {teamA: { name: "Outsiders", result: 2 }, teamB: { name: "Navi", result: 1 }},
    {teamA: { name: "G2", result: 1 }, teamB: { name: "OG", result: 2 }}
  ],
  [
    {teamA: { name: "Outsiders", result: 2 }, teamB: { name: "OG", result: 1 }}
  ]
];

This will show bracket of semi final and final game.

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

render(
  <Bracket games={game} header={["Semi", "Final"]} />, 
  document.getElementById('app')
);