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
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;
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;
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 |