webghoul-react-bracket-tournaments v1.1.1

webGhoul React Bracket Tournaments💯

Installation

In your command-line on Windows:

    c:\> npm i webghoul-react-bracket-tournaments

In your terminal on Mac OS X/Linux:

    $sudo npm install -g webghoul-react-bracket-tournaments

🛒Parameters

Match Formate

{ player1:"webGhoul", player2:"Amr007", avatar1:avatarImg, avatar2:avatarImg, matchLink:"", handleAbortMatch:()=>{}, handleFinishMatch:()=>{}, handlePlayer1Clicked:()=>{}, handlePlayer2Clicked:()=>{} }

Examples

import "./index.css"
import avatarImg from "./knight.png"
import loadingImg from "./loading.png"
import Bracket from "webghoul-react-bracket-tournaments"

function App() {
  const data=[
    [
      {
        player1:"webGhoul",
        player2:"Amr006",
        avatar1:avatarImg,
        avatar2:avatarImg,
        matchLink:"",
        handleAbortMatch:()=>{},
        handleFinishMatch:()=>{},
        handlePlayer1Clicked:()=>{},
        handlePlayer2Clicked:()=>{}
      },
      {
        player1:"webGhoul1",
        player2:"Amr007",
        avatar1:avatarImg,
        avatar2:avatarImg,
        matchLink:"",
        handleAbortMatch:()=>{},
        handleFinishMatch:()=>{},
        handlePlayer1Clicked:()=>{},
        handlePlayer2Clicked:()=>{}
      }
    ],
    [
      {
        player1:"webGhoul",
        player2:"Amr007",
        avatar1:avatarImg,
        avatar2:avatarImg,
        matchLink:"",
        handleAbortMatch:()=>{},
        handleFinishMatch:()=>{},
        handlePlayer1Clicked:()=>{},
        handlePlayer2Clicked:()=>{}
      }
    ]
  ]

  return (
    <div className="App">
      <Bracket nodes={data} loadingImg={loadingImg}/>
    </div>
  );
}

export default App;

function App() { const data=[ { player1:"webGhoul", player2:"Amr006", avatar1:avatarImg, avatar2:avatarImg, matchLink:"", handleAbortMatch:()=>{}, handleFinishMatch:()=>{}, handlePlayer1Clicked:()=>{}, handlePlayer2Clicked:()=>{} }, { player1:"webGhoul1", player2:"Amr007", avatar1:avatarImg, avatar2:avatarImg, matchLink:"", handleAbortMatch:()=>{}, handleFinishMatch:()=>{}, handlePlayer1Clicked:()=>{}, handlePlayer2Clicked:()=>{} }, { player1:"webGhoul2", player2:"Amr008", avatar1:avatarImg, avatar2:avatarImg, matchLink:"", handleAbortMatch:()=>{}, handleFinishMatch:()=>{}, handlePlayer1Clicked:()=>{}, handlePlayer2Clicked:()=>{} }, { player1:"webGhoul3", player2:"Amr009", avatar1:avatarImg, avatar2:avatarImg, matchLink:"", handleAbortMatch:()=>{}, handleFinishMatch:()=>{}, handlePlayer1Clicked:()=>{}, handlePlayer2Clicked:()=>{} } ]

return (

<div className="App">
  <Bracket nodes={data} loadingImg={loadingImg}/>
</div>

); }

export default App;

<img width="75%"   alt="example 2" src="https://github.com/web-ghoul/webghoul-react-bracket-tournaments/assets/84246173/2c003820-47e8-4cbb-9570-eb6feb8c2340"/>
</p>