@kousenlsn/react-hex-grid

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 👷

1. Install the package:

• npm install react-hex-grid
• or yarn add react-hex-grid;

Using 🔌

• Simple instance example.

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.