# react-tournament-grid

> React tournament grid with simple underlying data model

Latest version **0.0.20** (published 2017-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-tournament-grid
pnpm add react-tournament-grid
yarn add react-tournament-grid
bun add react-tournament-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.20 |
| Published | 2017-11-10 |
| First published | 2017-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Igor Nikolaev |
| Maintainers | nikolaevigor |
| Keywords | react, tournament, grid |

## Links

- npm: https://www.npmjs.com/package/react-tournament-grid
- Repository: https://github.com/nikolaevigor/react-tournament-grid
- Homepage: https://github.com/nikolaevigor/react-tournament-grid#readme
- Issues: https://github.com/nikolaevigor/react-tournament-grid/issues
- npm.io page: https://npm.io/package/react-tournament-grid

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^15.6.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.20 (latest) — 2017-11-10
- 0.0.19 — 2017-11-10
- 0.0.18 — 2017-11-10
- 0.0.17 — 2017-11-10
- 0.0.16 — 2017-10-14
- 0.0.15 — 2017-10-14
- 0.0.14 — 2017-08-21
- 0.0.13 — 2017-08-17
- 0.0.12 — 2017-08-17
- 0.0.11 — 2017-08-17
- 0.0.10 — 2017-08-16
- 0.0.9 — 2017-08-16
- 0.0.8 — 2017-08-16
- 0.0.7 — 2017-08-16
- 0.0.6 — 2017-08-16
- … 5 more at https://npm.io/package/react-tournament-grid/versions

## README

# Simple component to render tournament grid

This small package presents simple components to implement tournament grid UI
with transparent data model.

[NPM Page](https://www.npmjs.com/package/react-tournament-grid)

## Installation

```
yarn add react-tournament-bracket
```

## Data model

### Series

Series is object that has following structure:

```
{
  stage: 2,
  order: 6,
  firstTeamId: 2,
  secondTeamId: 15,
  games: [{...}, ..., {...}]
}
```

### Game

Game is used to count series score.

```
{
  firstTeamResult: 'win',
  secondTeamResult: 'loose'
}
```

Score is counting according to number of won games for each team.
For example, in following example score will be 2:1:

```
{
  stage: 0,
  order: 0,
  games: [
    {
      firstTeamResult: 'win',
      secondTeamResult: 'loose'
    },
    {
      firstTeamResult: 'loose',
      secondTeamResult: 'win'
    },
    {
      firstTeamResult: 'draw',
      secondTeamResult: 'draw'
    },
    {
      firstTeamResult: 'win',
      secondTeamResult: 'loose'
    }
  ]
}
```

## Notes

* Currently support only single-elimination grid type
* Root series (i.e. Grand-Final) is represented with (stage: 0, order: 0) series
* Tree depth is calculated based on max stage in input series array. For example you have max stage equal 2, hence tree will be of depth 3 and it will has (2^3 - 1) = 7 series.
* Missed series will have `'TBD'` titles.

## ToDo

- [ ] Documentation
- [ ] Examples

## Contributions

Any contributions are highly appreciated.

---
_Source: https://npm.io/package/react-tournament-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._