1.0.0 • Published 3 years ago
@kousenlsn/react-hex-grid v1.0.0
react-hex-grid
Generate Hex grids with SVG
Yet another implementation of https://www.redblobgames.com/grids/hexagons/.
Also inspired from https://www.npmjs.com/package/react-hexgrid.
Features :mag_right:
- Core components for rendering any Hexgrid format;
- Util methods to quick generate default grids;
- Util methods for doing math operations with hexagons.
Install :construction_worker:
- Install the package:
npm install react-hex-grid- or
yarn add react-hex-grid;
Using :electric_plug:
HexGrid props
| Prop | Description |
|---|---|
| className?: string | class-name delegated to the SVG |
| orientation?: OrientationsEnum | Orientation of the hexagons: pointy or flat |
| origin?: Point | Initial point of the SVG coordinate to start drawing the Hexagons |
| hexSize?: number | Size of the Hexagons |
| spacing?: number | spacing between each Hexagon |
| width: number | string | width of the SVG |
| height: number | string, | height of the SVG |
| viewBox: string | SVG base viewbox |
Hexagon props
| Prop | Description |
|---|---|
| id: number | string; | unique id of each Hex |
| coordinates: Hex; | can be defined as xy or xyz |
| patternFill?: string; | if using any pattern, it is instanced as url(#${patternFill}) |
| cellStyle?: CSSProperties; | styles |
| className?: string; | class-name delegated |
| onMouseEnter...?: HexEvent; | Events over hexagons. (all basic events covered) |
Path props
| Prop | Description |
|---|---|
| start: Hex | Hexagon used to calculate the initial point of the path |
| end: Hex; | Hexagon used to calculate the final point of the path |
HexPattern props
| Prop | Description |
|---|---|
| id: string | unique id for each <pattern> |
| url: string | url / base64 data |
Generation methods
| Method | Description |
|---|---|
| orientedRectangle(width: number, height: number, cubic = false) | cubic defines if using Z coordinate. If so, Y does nothing. |
| rectangle(mapWidth: number, mapHeight: number, cubic = false, zeroAsCentralPoint = false) | // |
| parallelogram(q1: number, q2: number, r1: number, r2: number, cubic) | // |
| hexagon(mapRadius: number, cubic = false) | // |
Math methods
| Method |
|---|
| hexToScreenPosition(hex: Hex, orientation: Orientation, origin: Point, size: number, spacing: number, cubic = false): Point; | interpolateHexes(a: Hex, b: Hex, t: number): Hex; | distanceBetweenHexes(begin: Hex, end: Hex): number; | roundToHex({ x, y, z }: Hex): Hex; | pixelToHex(point: Point, orientation: OrientationsEnum, origin: Point, hexSize: Point): Hex; | cubeCoordinatesToAxial(x: number, z: number): Hex; | axialCoordinatesToCube(x: number, y: number): Hex; | neighboor(hex: Hex, direction: Directions): Hex
Feel free to contribute, report bugs, or contact me.