FlawwsX / react-hexagonal-progressbar

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.

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