React Tournament Ready

React Tournament Ready is a JavaScript library that allows you to create tournament brackets in React with ease. It provides a simple API for creating brackets and rendering them on your web page.

Features

• Create single and double elimination brackets
• Customizable bracket styling
• Automatic bracket sizing based on number of participants
• Support for BYEs and placeholder competitors
• Callbacks for event handling
• Lightweight and easy to use

Installation

To get started with React Tournament Ready, simply install it using npm:

npm install react-tournament-ready

Usage

First, import the Bracket component from react-tournament-ready:

import { Bracket } from 'react-tournament-ready';

To create a single elimination bracket, pass an array of competitors to the Bracket component:

const competitors = ['Player One', 'Player Two', 'Player Three', 'Player Four'];
<Bracket competitors={competitors} />

This will render a single elimination bracket with four competitors. To create a double elimination bracket, pass true as the doubleElimination prop:

<Bracket competitors={competitors} doubleElimination={true} />

You can customize the styling of the bracket by passing a style prop with CSS properties:

const customStyle = {
  fontFamily: 'Arial, sans-serif',
  fontSize: '1.2rem',
  backgroundColor: '#f7f7f7',
  border: '1px solid #ccc',
  borderRadius: '4px',
  padding: '10px',
};
<Bracket competitors={competitors} style={customStyle} />

API

Bracket

The Bracket component is the main component of React Tournament Ready. It takes the following props:

• competitors: An array of competitors to be rendered in the bracket. This can contain BYEs and placeholder competitors.
• doubleElimination (optional): A boolean indicating whether to render a double elimination bracket. Defaults to false.
• onCompetitorClick (optional): A callback function to be called when a competitor is clicked.
• onMatchClick (optional): A callback function to be called when a match is clicked.

Examples

Create a Single Elimination Bracket

import React from 'react';
import { Bracket } from 'react-tournament-ready';

const App = () => {
  const competitors = ['John Doe', 'Jane Doe', 'Foo Bar', 'Baz Qux'];
  return <Bracket competitors={competitors} />;
};

export default App;

Create a Double Elimination Bracket

import React from 'react';
import { Bracket } from 'react-tournament-ready';

const App = () => {
  const competitors = ['John Doe', 'Jane Doe', 'Foo Bar', 'Baz Qux'];
  return <Bracket competitors={competitors} doubleElimination={true} />;
};

export default App;

Customize Bracket Styling

import React from 'react';
import { Bracket } from 'react-tournament-ready';

const App = () => {
  const competitors = ['John Doe', 'Jane Doe', 'Foo Bar', 'Baz Qux'];
  const customStyle = {
    fontFamily: 'Arial, sans-serif',
    fontSize: '1.2rem',
    backgroundColor: '#f7f7f7',
    border: '1px solid #ccc',
    borderRadius: '4px',
    padding: '10px',
  };
  return <Bracket competitors={competitors} style={customStyle} />;
};

export default App;

Conclusion

React Tournament Ready is a simple and lightweight library for creating tournament brackets in React. Its easy-to-use API and customizable styling make it perfect for sports and gaming websites. Give it a try and see how it can enhance your web app today!