react-hexagonal-progressbar

A hexagonal progressbar component, built with SVG and extensively customizable.

Usage no npm install needed!

<script type="module">
  import reactHexagonalProgressbar from 'https://cdn.skypack.dev/react-hexagonal-progressbar';
</script>

README

React Hexagonal Progressbar

It is a simple Hexagobal progress component created for react based only on SVG graphics and has various of options to customize it.

Alt text

Install

npm install react-hexagonal-progressbar

or

yarn add react-hexagonal-progressbar

Sample

<HexagonalProgressbar
    value={80}
    lineCap="line|round"
    color="#00FF00"
    level={5}
    location="rightTop|rightBottom|leftBottom|leftTop"
/>

props

Props Type Default Description
value number 0 Number of percent you want to show
badgeImg any null icon inside your badge, png, svg, ...
disabled bool false to disable you badge
color string red color hexa, string or rgb
level number null optional props to display the current level
lineCap stirng round options: line, round
location string rightTop options:rightTop, rightBottom, leftBottom, leftTop