Skip to content

IcculusC/react-hex-engine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

df15733 · Sep 21, 2021
Oct 29, 2018
Oct 23, 2018
Oct 29, 2018
Oct 16, 2018
Oct 29, 2018
Oct 29, 2018
Oct 29, 2018
Oct 29, 2018
Mar 28, 2016
Oct 16, 2018
Oct 28, 2018
Mar 28, 2016
Oct 16, 2018
Mar 28, 2016
Oct 29, 2018
Oct 16, 2018
Oct 28, 2018
Oct 28, 2018
Oct 29, 2018
Sep 21, 2021

Repository files navigation

GitHub release CircleCI branch GitHub pull requests GitHub issues GitHub last commit Docs status

react-hex-engine

Installation

yarn add react-hex-engine

Usage

Basic Example

This is the only example for now, but you can see more source in the storybook.

import React from "react";
import { Hexagon, HexEngine } from "react-hex-engine";

const HexMap = () => (
  <HexEngine
    spacing={1.05}
    width={320}
    height={240}
    viewBox={{ x: -30, y: -30, width: 60, height: 60 }}
  >
    <Hexagon q={-1} r={0} s={1} />
    <Hexagon q={0} r={0} s={0} />
    <Hexagon q={1} r={0} s={-1} />
  </HexEngine>
)

Credit

Originally forked from https://github.com/Hellenic/react-hexgrid

Quote from the original readme

React components to build interactive hexagons grids and games. It uses SVG which makes it fast, scalable and easy to apply custom styles. You can easily customize the layout of the grid just by configuration.

Component-based approach allows you to customize the grid shape to suit your needs or even apply your own components / SVG elements to it. You can use pre-defined generator to create certain shape grid or you may build totally your own grid to the shape you wish, while still keeping it under control and interactive.

You could easily use this library to build (just to name a few) a nice portfolio, image library or even a game!

With inspiration from http://www.redblobgames.com/grids/hexagons.