Using with React

[nakullondhe]

It would be really helpful if we have details about using on react or other libraries

[Drarig29]

I just created an example for you: https://replit.com/@Drarig29/React-and-brackets-viewerjs

Basically, there is no React component created in this library because all the rendering is done manually with a defined CSS file and a JS file which adds bracketsViewer.render() in the window object.

So, just add this in your index.html file as stated in the README:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Drarig29/brackets-viewer.js/dist/brackets-viewer.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Drarig29/brackets-viewer.js/dist/brackets-viewer.min.js"></script>

Or you could install the package using npm or yarn and serve these files from your node_modules folder (please don't serve the whole folder 😅).

Once you've done that, you can make your React component to wrap the viewer. For example:

import React, { useEffect } from 'react';

const URL = 'https://raw.githubusercontent.com/Drarig29/brackets-viewer.js/master/demo/db.json';

async function render() {
  const data = await fetch(URL).then(res => res.json());

  window.bracketsViewer.render({
    stages: data.stage,
    matches: data.match,
    matchGames: data.match_game,
    participants: data.participant,
  });
}

function App() {
  useEffect(() => {
    render();
  }, []);
  
  return <div className="brackets-viewer"></div>
}

export default App;

Obviously, you would host your own database and fetch this one (not my static demo db.json file). And this database would be manipulated by brackets-manager.js.

[Drarig29]

@nakullondhe closing this as you don't answer.