https://github.com/holdempokertools/handmatrix
React Texas Hold'em hand matrix component
https://github.com/holdempokertools/handmatrix
hand-matrix holdem holdem-poker poker react react-library
Last synced: about 2 months ago
JSON representation
React Texas Hold'em hand matrix component
- Host: GitHub
- URL: https://github.com/holdempokertools/handmatrix
- Owner: HoldemPokerTools
- License: mit
- Created: 2020-10-05T08:22:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T15:03:02.000Z (over 2 years ago)
- Last Synced: 2025-04-25T10:18:55.428Z (about 2 months ago)
- Topics: hand-matrix, holdem, holdem-poker, poker, react, react-library
- Language: JavaScript
- Homepage:
- Size: 758 KB
- Stars: 13
- Watchers: 0
- Forks: 5
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Texas Hold'em Hand Matrix Component
Hold'em Poker Tools React hand matrix is a React component to make displaying
poker ranges simple!
Install •
Usage •
API •
Support •
License
## Install
Install via NPM (or Yarn):
```
npm i --save @holdem-poker-tools/hand-matrix
```
## Usage
```
const range = ['AA', 'KK', 'QQ', 'AKs', 'AQs'];
({
background: range.indexOf(combo) !== -1 ? "lightgreen" : "lightgrey"
})}
comboSubtext={(combo) => range.indexOf(combo) !== -1 ? "100%" : "0%"}
onSelect={combo => console.log(`selected ${combo}`)}
onPointerDown={combo => console.log(`pointerDown on ${combo}`)}
onPointerUp={combo => console.log(`pointerUp on ${combo}`)}
onPointerEnter={combo => console.log(`pointerEnter on ${combo}`)}
onPointerMove={combo => console.log(`pointerMove on ${combo}`)}
/>
```
For an advanced usage example, see the [Hold'em Tools Range Assistant web app](http://rangeassistant.holdempoker.tools/)
and associated [GitHub repository](https://github.com/HoldemPokerTools/RangeAssistant).
## API
Prop | Type | Default | Required | Description
---- | :----: | :-------: | :--------: | -----------
**colorize** | `Boolean` | `true` | :x: | Whether to apply default colors to the hand matrix to distinguish pairs vs offsuit vs suited hands. The result of the comboStyle function will override these default colors.
**comboStyle** | `Function` | | :x: | Function which receives the combo (e.g. AKo) and must return an object containing the styles to apply to the matrix tile for that combo e.g. {background: "#FFFFFF"}. Useful for displaying ranges.
**showText** | `Boolean` | `true` | :x: | Whether to show the text in the combo cells
**comboSubtext** | `Function` | | :x: | Function which receives the combo (e.g. AKo) and must return the text or React components to display beneath the combo text. Default is for no text to be displayed. Useful for displaying information such as combo equity
**onSelect** | `Function` | | :x: | Click event handler for a combo tile. Will be called with combo e.g. AKo
**onPointerDown** | `Function` | | :x: | Pointer down event handler for a combo tile. Will be called with combo e.g. AKo
**onPointerEnter** | `Function` | | :x: | Pointer enter event handler for a combo tile. Will be called with combo e.g. AKo
**onPointerMove** | `Function` | | :x: | Pointer move event handler for a combo tile. Will be called with combo e.g. AKo
**onPointerUp** | `Function` | | :x: | Pointer up event handler for a combo tile. Will be called with combo e.g. AKo
## Support
All Hold'em Poker Tools projects are open source and free to use or
extend to your heart's extent. If you'd like to say thanks,
feel free to show your support on Buy Me a Coffee:
## License
MIT