https://github.com/tometo-dev/react-hex-grids

Hexagonal Grid Layout for react
https://github.com/tometo-dev/react-hex-grids

react react-grid-layout react-hex-grids

Last synced: about 1 year ago
JSON representation

Hexagonal Grid Layout for react

• Host: GitHub
• URL: https://github.com/tometo-dev/react-hex-grids
• Owner: tometo-dev
• License: mit
• Created: 2020-06-19T03:11:40.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T09:19:24.000Z (over 3 years ago)
• Last Synced: 2025-04-19T23:34:33.413Z (about 1 year ago)
• Topics: react, react-grid-layout, react-hex-grids
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-hex-grids
• Size: 2.01 MB
• Stars: 5
• Watchers: 0
• Forks: 0
• Open Issues: 41
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Hexagonal Grid Layout for React

![Hexagonal Grid Layout Demo](src/assets/hex-grid-layout-demo.png?raw=true "Hexagonal Grid Layout Demo")

---

#### Motivation:

The work of Jesse Breneman [here](https://ninjarockstar.dev/css-hex-grids/).

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

#### Usage:

```

import HexGrids, { HexGridItem, HexGridList } from "react-hex-grids"

...

  {item1}

  ....

```

See [examples](/example/src/App.js)

---

Also available on [bit.dev](https://bit.dev/tsuki/react-hex-grids/hex-grids)

```

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

```

Learn more [here](https://docs.bit.dev/docs/workspace#initializing-workspace).

#### Available scripts

In the project directory, you can run:

##### `yarn start`

Runs the app in the development mode.


Open [http://localhost:3000](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 😃