react-svg-hexagon-flip

A React component to render a flippable hexagon with two faces.

HexagonFlip must contain two Hexagons components.

Getting started

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

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

If you don't use package manager and you want to include react-svg-hexagon-flip 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-flip/dist/react-svg-hexagon-flip.min.js"></script>
<!-- or -->
<script src="node_modules/react-svg-hexagon-flip/dist/react-svg-hexagon-flip.min.js"></script>

Usage

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

const App = () => (
  <HexagonFlip>
    <Hexagon>{/* Recto content */}</Hexagon>
    <Hexagon>{/* Verso content */}</Hexagon>
  </HexagonFlip>
)

Props

| Name | PropType | Description | Default | | -------- | ---------------- | ------------------------------------------------ | -------------- | | clipPath | PropTypes.string | ClipPath for flippable effect. null to disable | "polygon(...)" | | duration | PropTypes.string | Flip transition duration | "0.5s" |

You may need to disable the clipPath if you have links in your hexagons

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