react-tournament-ready

React-Tournament-Ready

React-Tournament-Ready is a library that helps developers build brackets of any size and complexity with ease. This library mainly focuses on making tournament brackets with ReactJS. It provides a collection of reusable React components and a set of utility functions to make the process of building brackets faster and smoother.

Installation

To install React-Tournament-Ready, you can use npm or yarn.

npm install react-tournament-ready
  

yarn add react-tournament-ready
  

Usage

After installing React-Tournament-Ready, you can import the components and functions in your React application.

import { Bracket, Game } from 'react-tournament-ready';
  import { generateBracket } from 'react-tournament-ready/utilities';
  
  const bracketData = generateBracket(4);
  
  export default function App() {
    return (
      <Bracket rounds={bracketData.rounds}>
        {bracketData.rounds.map((round, index) => (
          <Game 
            key={index}
            game={round[0]}
            roundIndex={index}
            gamesPerRound={bracketData.gamesPerRound}
          />
        ))}
      </Bracket>
    );
  }
  

The above code generates a simple 4-player bracket using the Bracket and Game components provided by React-Tournament-Ready. The generateBracket function helps in generating the bracket data needed to render the bracket.

Customization

React-Tournament-Ready components are highly customizable. You can pass different props to customize the look and feel of the components.

<Bracket
    rounds={bracketData.rounds}
    showSeeds={false}
    showRoundTitles={true}
    roundTitleTemplate={(roundIndex) => `Round ${roundIndex + 1}`}
    gameComponent={CustomGameComponent}
    gameProps={{
      customProp: 'value'
    }}
  >
    ...
  </Bracket>
  

In the above code, we are passing different props to the Bracket component to customize the bracket. We are hiding the seeds, showing the round titles, providing a custom round title template, using a custom game component, and passing custom props to the game component.

Conclusion

React-Tournament-Ready is a powerful library that helps developers build tournament brackets easily and quickly. With its highly customizable components and utility functions, it provides a great way to create brackets of any size and complexity.