playoffs v0.0.4
playoffs ·
JavaScript library that takes your data and draws the tree of a knockout tournament in the browser.
Suitable (hopefully) for any kind of sport
Basic usage
import { createPlayoffs } from 'playoffs'
createPlayoffs(your_data, your_wrapper_element)
You only need a wrapper element and some properly formatted data
Some lovely features
🎾 Tennis: doubles, tiebreak, points within a game (15:30 etc), "serving" dot
🍏 Live updates (and special "live" appearance of a match)
🔦 Team's path within a tournament is highlighted on click (if you want)
👯 Multiple instances of playoffs on a page
📱 Can be easily tuned for mobile devices
📺 "Fullscreen" (full browser viewport) mode
📜 Vertical scroll can work with mousewheel or buttons or both
Plenty of options (try)
- Sizes, margins and fonts are quite flexible
- Navigation between rounds can be adjusted or built from scratch
You can inject your own markup here and there
you may choose to render matches yourself and use playoffs only as a positioning mechanism
- You can specify what happens when a match (or a side of a match) is clicked
- You may opt to display a specific number of rounds at a time
Installation: npm or yarn
npm install playoffs
# or
yarn add playoffs
Minified bundle is 49k, gzipped is 12k.
Includes a d.ts file for ease of TypeScript development
Licensing
MIT