react-svg-hexagon

react-svg-hexagon

react-svg-hexagon is a React SVG valid hexagon component that can contain html and React components.

It uses <foreignObject> SVG tag allowing inclusion of non SVG elements. Children will not overflow the hexagon because of the clipPath SVG tag.

Hexagon can be flippable and be part of a responsive grid.

Example

Getting started

You can download react-svg-hexagon from the NPM registry via the npm or yarn commands

yarn add react-svg-hexagon
# or
npm install react-svg-hexagon --save

If you don't use package manager and you want to include react-svg-hexagon directly in your html, you could get it from the UNPKG CDN or from the local UMD build.

<script src="https://unpkg.com/react-svg-hexagon/dist/react-svg-hexagon.min.js"></script>
<!-- or -->
<script src="node_modules/react-svg-hexagon/dist/react-svg-hexagon.min.js"></script>

Usage

Easy usage

import React from "react"
import Hexagon from "react-svg-hexagon"

const App = () => (
  <>
    {/* without content */}
    <Hexagon fill="green" stroke="black" strokeWidth={3} radius={10} />
    {/* with content */}
    <Hexagon>{/* Content */}</Hexagon>
  </>
)

Advanced usage

You can use the render prop to make Hexagon more custom.

For example, if you need to add a valid svg link around hexagon:

import React from "react"
import Hexagon from "react-svg-hexagon"

const App = () => (
  <Hexagon
    render={({ClipPath, Polygon, Content, Svg}) => {
      return (
        <Svg>
          <a xlinkHref="https://github.com/xuopled/react-svg-hexagon">
            <ClipPath />
            <Polygon />
            <Content>{/* Your content */}</Content>
          </a>
        </Svg>
      )
    }}
  />
)

Props

Name	PropType	Description	Default
fill	PropTypes.string	Hexagon background color	-
height	PropTypes.number	Hexagon height	null
radius	PropTypes.number	Hexagon corners radius	0
side	PropTypes.number	Hexagon side length	100
stroke	PropTypes.string	Hexagon stroke color	-
strokeWidth	PropTypes.string	Hexagon stroke width	-

If you set height, side prop will have no effect anymore because side will be automatically calculated.

Contributing

• ⇄ Pull/Merge requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests (yarn test).

See CONTRIBUTING.md guidelines

Changelog

See CHANGELOG.md

License

This project is licensed under the MIT License - see the LICENCE.md file for details