JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5565
  • Score
    100M100P100Q116927F

Package Exports

  • react-circle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-circle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
  animationDuration="1s" //String: Length of animation
  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