80

GitHub - zzarcon/react-circle: Renders a svg circle + progress, it just works ?

 6 years ago
source link: https://github.com/zzarcon/react-circle
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

Logo

react-circle Build Status

Renders a svg circle + percentage. It just works

Demo

https://zzarcon.github.io/react-circle

Install ?

$ yarn add react-circle

Usage ⛏

Basic ?

ReactCircle is opinionated and comes with default size and colors, just pass the progress prop to get them:

import Circle from 'react-circle';

<Circle
  progress={35}
/>

Custom ?

Optionally, you can pass the following props and customize it as your will

import Circle from 'react-circle';

// All avaliable props for customization:
// Details are ordered as:
// <Type>: <Description>
<Circle
  animate={true} // Boolean: Animated/Static progress
  responsive={true} // Boolean: Make SVG adapt to parent size
  size={150} // Number: Defines the size of the circle.
  lineWidth={14} // Number: Defines the thickness of the circle's stroke. 
  progress={69} // Number: Update to change the progress and percentage.
  progressColor="cornflowerblue"  // String: Color of "progress" portion of circle.
  bgColor="whitesmoke" // String: Color of "empty" portion of circle.
  textColor="hotpink" // String: Color of percentage text color.
  textStyle={{ 
    font: 'bold 5rem Helvetica, Arial, sans-serif' // CSSProperties: Custom styling for percentage.
  }}
  percentSpacing={10} // Number: Adjust spacing of "%" symbol and number.
  roundedStroke={true} // Boolean: Rounded/Flat line ends
  showPercentage={true} // Boolean: Show/hide percentage.
  showPercentageSymbol={true} // Boolean: Show/hide only the "%" symbol.
/>

Features


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK