tournament-bracket-tree
Renders a simple tournament bracket
Install
npm install --save tournament-bracket-tree
About
tournament-bracket-tree
only supports binary trees- The tree does not have to be balanced
- The content of the node is 100% customizable
- All nodes must be the same size
- This library supports typescript
Usage
1. Construct your tree
Tree type:
Each node can have zero (leaf), one (unary) or two (binary) children:
When creating a unary node, either “left“ or “right“ can be used.
2. Create map function
3. Combine map function and tree data into bracket:
;;
TreeGenerator Props
interface Props {
root: "top" | "bottom" | "left" | "right";
mapDataToNode: (yourTree: YourTreeType) => JSX.Element;
tree: Tree<YourTreeType>;
lineThickness?: number // Default = 1(px);
lineStyle?: string // Default = "solid";
lineColor?: string // Default = "black";
lineLength?: number //Default = 25(px);
}
Important observations
Balanced trees
If you are using "root" as right or left:
- You can add top and bottom margins to your outer html tag to ensure distance between nodes
If you are using "root" as top or bottom:
- You can add right and left margins to your outer html tag to ensure distance between nodes
Unbalanced trees
If your tree is large and significantly unbalanced, the lines will distort.
Full example:
To do
- Add testing
Run Example
- Node version required >= v12.18.0
Known issues
- Distortion of connecting lines if tree is significantly unbalanced
- Chrome specific: due to Chrome's pixelation calculation, some of the generated lines might display 1px off of desired location
License
MIT © cynthiasantee