💯
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
Props | value |
---|---|
nodes | array of arrays , each array contains matches of a round |
loadingImg | loading image for the matches that you don't set yet in nodes |
Match Formate
{ player1:"webGhoul", player2:"Amr007", avatar1:avatarImg, avatar2:avatarImg, matchLink:"", handleAbortMatch:()=>{}, handleFinishMatch:()=>{}, handlePlayer1Clicked:()=>{}, handlePlayer2Clicked:()=>{} }
Examples
📌 Example 1
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;
📌 Example 2
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:"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;