1.0.1 • Published 5 years ago

react-svg-hexagon-flip v1.0.1

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

react-svg-hexagon-flip

npm package Travis Codecov Module formats

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

NamePropTypeDescriptionDefault
clipPathPropTypes.stringClipPath for flippable effect. null to disable"polygon(...)"
durationPropTypes.stringFlip 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

1.0.1

5 years ago

1.0.0

5 years ago