react-hex-grids

The work of Jesse Breneman here.

Usage no npm install needed!

<script type="module">
  import reactHexGrids from 'https://cdn.skypack.dev/react-hex-grids';
</script>

README

Hexagonal Grid Layout for React

Hexagonal Grid Layout Demo

Motivation:

The work of Jesse Breneman here.

While reading the article, I thought, "Why not build some react components for this?"

Usage:

import HexGrids, { HexGridItem, HexGridList } from "react-hex-grids"
...
<HexGridList>
  <HexGridItem>{item1}<HexGridItem>
  ....
</HexGridList>

See examples

Also available on bit.dev

bit import tsuki.react-hex-grids/hex-grids

Learn more here.

Available scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn prettier:format

Run prettier to format the code.

yarn rollup:build

Build using rollup

Contributing

PRs are always welcome 😃