😸 kitty-hexgrid

!Downloads

React components to build interactive hexagons grids. 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.

Pre-requisites

You should be familiar with Node + NPM, React and ES6 to use this library.
Library also depends heavily on HTML5 features (mostly SVG) which all might not be supported by every browser yet.

Getting Started

Install it via npm:

``shell
npm i kitty-hexgrid
`

Example

`html
import { HexGrid, Layout, Hexagon, Text, Pattern, Path, Hex } from 'kitty-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

);
}
}
``

Examples

Coming soon.