tournament-bracket-tree

> Renders a simple tournament bracket

 

Install

``bash
npm install --save tournament-bracket-tree
`

About

- tournament-bracket-treeonly 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

$3

Tree type:

`tsx
interface Tree {
data: T
left?: Tree
right?: Tree
}
`

Each node can have zero (leaf), one (unary) or two (binary) children:

`tsx
import { Tree } from 'tournament-bracket-tree'

const leafNode: Tree = { data: 5 }
const unaryNode: Tree = { data: 3, left: leafNode }
const binaryNode: Tree = { data: 2, left: leafNode, right: unaryNode }
`

When creating a unary node, either “left“ or “right“ can be used.

$3

`tsx
const mapMyDataToNode = (data: number) => {
return (
//don't forget to have a standard height and width that will be appplied to all nodes



)
}
`

$3

`tsx
import { TreeGenerator } from 'tournament-bracket-tree';
import 'tournament-bracket-tree/dist/index.css';



`

$3

`
interface Props {
root: "top" | "bottom" | "left" | "right";
mapDataToNode: (yourTree: YourTreeType) => JSX.Element;
tree: Tree;
lineThickness?: number // Default = 1(px);
lineStyle?: string // Default = "solid";
lineColor?: string // Default = "black";
lineLength?: number //Default = 25(px);
}
``

$3

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

!alt tag

#### Unbalanced trees

If your tree is large and significantly unbalanced, the lines will distort.

$3

- https://codesandbox.io/s/tournament-bracket-tree-ijrr7

$3

- Add testing

$3

- Node version required >= v12.18.0

$3

- 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