Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/airtoxin/react-hex
hexagonal grids with react.js
https://github.com/airtoxin/react-hex
grid hex hexagonal react react-component react-components
Last synced: about 9 hours ago
JSON representation
hexagonal grids with react.js
- Host: GitHub
- URL: https://github.com/airtoxin/react-hex
- Owner: airtoxin
- License: mit
- Created: 2016-04-11T22:38:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-24T17:38:12.000Z (almost 2 years ago)
- Last Synced: 2024-09-18T11:56:21.513Z (about 2 months ago)
- Topics: grid, hex, hexagonal, react, react-component, react-components
- Language: JavaScript
- Homepage: https://airtoxin.github.io/react-hex
- Size: 1.94 MB
- Stars: 24
- Watchers: 5
- Forks: 7
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hex [](https://travis-ci.org/airtoxin/react-hex)
draw svg hexagonal grid with react
## Install
`$ npm i react-hex`
## Example
```javascript
import React from 'react';
import ReactDom from 'react-dom';
import Hex, { gridPoints } from 'react-hex';
const Hexes = () => {
const hexes = gridPoints('pointy-topped', 100, 100, 10, 25, 25).map(({ props }) => (
));
return (
{hexes}
);
};
ReactDom.render(); document.getElementById('example'));
```
More examples, see [Storybook](https://airtoxin.github.io/react-hex).
## Documents
### `` (default exported)
Main React component of hex.
| name | value type | description |
|------|--------------------------------------------------------------|-----------------------------------------|
| type | PropTypes.oneOf(['pointy-topped', 'flat-topped']).isRequired | hexagon type |
| x | PropTypes.number.isRequired | hexagon's center coordinate x |
| y | PropTypes.number.isRequired | hexagon's center coordinate y |
| size | PropTypes.number.isRequired | hexagon edge length |
```js
import Hex from 'react-hex';
```
### `gridPoint(oType, oX, oY, size, gridX, gridY)`
__return: `{ props: { type, x, y, size }, gridX, gridY }`__
Helper function to calculate hex location in grid.
`props` field in returning object of this function can use for props of `Hex` component.
(prefix `o` means original.)
| name | value type | description |
|-------|----------------------------------|-----------------------------------------|
| oType | 'pointy-topped' or 'flat-topped' | original hexagon type |
| oX | number | original hexagon's center coordinate x |
| oY | number | original hexagon's center coordinate y |
| size | number | hexagon edge length |
| gridX | number | coordinate x in hexagonal grid system |
| gridY | number | coordinate y in hexagonal grid system |
```js
import Triangle, { gridPoint } from 'react-hex';
const { props } = gridPoint('pointy-topped', 0, 0, 50, 3, 4);
```
### `gridPoints(oDirection, oX, oY, size, girdWidth, gridHeight)`
__return: `[ { props: { type, x, y, size }, gridX, gridY }, ... ]`__
Helper function to bulk calculate hexes location of grid.
(prefix `o` means original.)
| name | value type | description |
|------------|----------------------------------|-----------------------------------------|
| oType | 'pointy-topped' or 'flat-topped' | original hexagon type |
| oX | number | original hexagon's center coordinate x |
| oY | number | original hexagon's center coordinate y |
| size | number | hexagon edge length |
| gridWidth | number | grid size of x |
| gridHeight | number | grid size of y |
```js
import Hex, { gridPoints } from 'react-hex';
const triangles = gridPoints('pointy-topped', 100, 100, 50, 5, 5).map(({ props, gridX, gridY }) = (
));
```
__pointy topped grid coordinate x,y__
__flat topped grid coordinate x,y__
## License
MIT