@kousenlsn/react-hex-grid
1.0.0 • Public • Published
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 🔎
- Core components for rendering any Hexgrid format;
- Util methods to quick generate default grids;
- Util methods for doing math operations with hexagons.
Install 👷
- Install the package:
npm install react-hex-grid
- or
yarn add react-hex-grid
;
Using 🔌
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.
Package Sidebar
Install
npm i @kousenlsn/react-hex-grid
Weekly Downloads