react-svg-hexagon-flip

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