Skip to content

React component that renders a fully adaptable grid of flat-topped hexagons using SVG

License

Notifications You must be signed in to change notification settings

CTFries/react-hexagon-grid

 
 

Repository files navigation

react-hexagon-grid

React component that renders a fully adaptable grid of flat-topped hexagons using SVG. The component fills the container with the hexagons, adapting their size properly.

react-hexagon-grid.gif

Installation

react-hexagon-grid can be installed using npm:

npm install --save react-hexagon-grid

Basic usage

import React from 'react';
import HexagonGrid from 'react-hexagon-grid';

const hexagons = [... /* Put your content here */];

React.render(
  <HexagonGrid
    gridWidth=300
    gridHeight=200
    hexagons={hexagons}
  />,
  document.getElementById('root')
);

See the demo for a working example.

Props

  • gridWidth - The width, in pixel, of the grid (required)
  • gridHeight - The height, in pixel, of the grid (required)
  • hexagons - An array of hexagon objects (required)
  • renderHexagonContent - A function to render the content of each hexagon
  • hexProps - The props that will be assigned to each hexagon

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

About

React component that renders a fully adaptable grid of flat-topped hexagons using SVG

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%