Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Hellenic/react-hexgrid
Build interactive hexagon grids with React
https://github.com/Hellenic/react-hexgrid
hexagonal-grids maintainer-wanted react
Last synced: 5 days ago
JSON representation
Build interactive hexagon grids with React
- Host: GitHub
- URL: https://github.com/Hellenic/react-hexgrid
- Owner: Hellenic
- License: mit
- Created: 2016-03-28T07:38:24.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-31T18:24:34.000Z (3 months ago)
- Last Synced: 2024-10-29T20:57:19.428Z (10 days ago)
- Topics: hexagonal-grids, maintainer-wanted, react
- Language: TypeScript
- Homepage: https://hellenic.github.io/react-hexgrid/examples/
- Size: 2.95 MB
- Stars: 318
- Watchers: 15
- Forks: 131
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - Hellenic/react-hexgrid - Build interactive hexagon grids with React (react)
README
# react-hexgrid
[](https://hellenic.github.io/react-hexgrid/examples/)
React components to build interactive hexagon grids. This library uses SVG and allows you to create fully customizable and scalable interactive hexagon grids with a simple api.
The component based approach allows you to customize the grid shape to suit your needs or even apply your own components or SVG elements to it. You can use the pre-defined generator to create certain grid shapes or you may build your own grid as you wish, while still keeping it under control and interactive.
You could easily use this library to build a nice portfolio, image library or even a game (just to name a few)! [](https://www.youtube.com/watch?v=thOifuHs6eY), enjoy!
> With inspiration from
> [http://www.redblobgames.com/grids/hexagons](http://www.redblobgames.com/grids/hexagons).
> 🖊️ Codepen to play around with: https://codepen.io/hellenic/project/editor/AYMbMM#
> Discord server: https://discord.gg/TxNb6EZZZE
## Upcoming Version 2
The new version should not contain any breaking changes. There is typescript support, some storybook examples for easy development and testing. The new version uses the newer react context api under the hood.
Though there should not be any breaking changes, there could be issues. Feel free to checkout the current beta release and give feedback.
Install via:
```
npm install react-hexgrid@beta
```
## Getting Started
Install it via npm:
```shell
npm install --save react-hexgrid
```
More documentation in the [Wiki](https://github.com/Hellenic/react-hexgrid/wiki).
## Coordinate system
This hexagonal grid uses a cubic coordinate system with three coordinates q, r and s.
. If you want to read about some hexagon mathematics and different coordinate systems maybe have a look at https://www.redblobgames.com/grids/hexagons/
## Example
```html
import { HexGrid, Layout, Hexagon, Text, Pattern, Path, Hex } from 'react-hexgrid';
import './App.css';
class App extends Component {
render() {
return (
{/* Grid with manually inserted hexagons */}
{/* Using pattern (defined below) to fill the hexagon */}
1, -1, 0
1, 0, -1
{/* Pattern and text */}
-1, 1, 0
);
}
}
```
Will look something like this (custom CSS applied):
# Styling
There are many options on how to apply css styling. Examples of inline styling, classic css styling and css-in-js styling with emotion are shown in the storybook examples (under /src/stories/).
# Drag and drop
There are examples of drag and drop implementations with native html5 drag and drop api, however these are not yet really well worked out. Feel free to jump in and maybe provide implementations with other drag and drop libraries.
## Examples / Storybook
To run storybook run `npm i` and then `npm run storybook`. Other examples are available in the examples (standalone versions based on create react app).
### Basics
1. [basic-board](https://github.com/Hellenic/react-hexgrid/tree/master/examples/basic-board) - Basic usage of react-hexgrid
2. [custom-grid](https://github.com/Hellenic/react-hexgrid/tree/master/examples/custom-grid) - Simple custom grid
3. [templates](https://github.com/Hellenic/react-hexgrid/tree/master/examples/templates) - Ready-made grid templates
### Advanced
1. [pathfinding](https://github.com/Hellenic/react-hexgrid/tree/master/examples/pathfinding) - Pathfinding
2. [drag & drop](https://github.com/Hellenic/react-hexgrid/tree/master/examples/drag-and-drop) - Drag & drop with two grids
3. [animations](https://github.com/Hellenic/react-hexgrid/tree/master/examples/animations) - Animations & effects
## Testing changes locally
You can test changes locally by running storybook. You can also use something like npm 7 workspaces to link this library on your local file system side by side with your application.
## License
MIT