zzarcon / react-circle

Renders a svg circle + progress, it just works 💘

react-circle

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(illustrated by default values):
// Details are ordered as: `<Type>: <Description>`
<Circle
  animate={true} // Boolean: Animated/Static progress
  animationDuration="1s" // String: Length of animation
  responsive={false} // Boolean: Make SVG adapt to parent size
  size="100" // String: Defines the size of the circle.
  lineWidth="25" // String: Defines the thickness of the circle's stroke.
  progress="0" // String: Update to change the progress and percentage.
  progressColor="rgb(76, 154, 255)" // String: Color of "progress" portion of circle.
  bgColor="#ecedf0" // String: Color of "empty" portion of circle.
  textColor="#6b778c" // String: Color of percentage text color.
  textStyle={{
    font: 'bold 4rem Helvetica, Arial, sans-serif' // CSSProperties: Custom styling for percentage.
  }}
  percentSpacing={10} // Number: Adjust spacing of "%" symbol and number.
  roundedStroke={false} // Boolean: Rounded/Flat line ends
  showPercentage={true} // Boolean: Show/hide percentage.
  showPercentageSymbol={true} // Boolean: Show/hide only the "%" symbol.
/>

Features

• No external dependencies
• No external styles
• 2KB size => https://bundlephobia.com/result?p=react-circle

react-circle's Issues

The entire app example is rerendered every frame of the animation

It's not exactly clear why.
https://perfht.ml/2vEbUc6

styled-components makes it harder to understand what's going on.

Improve accesibility

Allow to disable animation

Currently there is no way to disable animation in the component, maybe a new prop like showAnimation?

Check => https://github.com/zzarcon/react-circle/blob/master/src/circle.tsx#L58

Percentage over 100 shows as empty.

When I pass in a percentage greater than 100, it fills in the bgColor, I thought it would just stay 'full'.

I have values that are bigger than 100, My work around is percent > 100 ? 100 : precent

Add "repository" property to package.json

Currently the repository field is missing 🤦‍♂️

Chart displays oddly with progress greater than 100%

The library behaves quite oddly when progress is greater than 100%. I think that the chart's progress line should cap at 100%, while the amount displayed should be the actual progress.

Check React 18 compatibility

Hi @zzarcon !
I love this library and have been using it for a long time. Thanks for publishing it!

What

I would like to check that it is compatible with React18 .

Context

I am in the process of upgrading my own product to React18.
In verifying the compatibility of dependent libraries, I noticed that this library is only checked up to React16.
I would like to add a check by CI, as it should help many people to know that they are compatible.

Proposed solutions

• replace to GitHub Actions from travis CI
• Add checks for node and react matrix
  • node: 8~18
  • react: 16~18

If there are no problems, a PR will be submitted after this.

Custom progress indicator

It would be cool to be able to show progress with a custom children. For example including an icon + text, only icon, an image etc... maybe use render props for it?

Add "keywords" in package.json

Add related keywords to the package to allow easier discoverability

progressColor这个属性可以使用渐变颜色吗？

progressColor = "linear-gradient(#6ED1FF,#1589FC)"类似于这种渐变色，应该怎么使用

Loading mode

It'd be nice to have a "loading mode" where the circle just spins as a loading indicator.

animate not working

Type error

I get the following error when attempting to run dev

ERROR in [at-loader] ./src/circle.tsx:68:211 TS2326: Types of property 'style' are incompatible. Type '{ strokeDashoffset: number; transition: string | null; }' is not assignable to type 'CSSProperties | undefined'. Type '{ strokeDashoffset: number; transition: string | null; }' is not assignable to type 'CSSProperties'. Types of property 'transition' are incompatible. Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'.

I'm using [email protected]

The problem is easily resolved by updating the line in question to
const transition = animate ? `stroke-dashoffset ${animationDuration} ease-out` : undefined;

Not sure if others are facing this problem or not.

tsconfig.json refers to a file that doesn't exist (atlaskit.d.ts)

react-circle/tsconfig.json

Line 19 in 57bb4d1

"./typings/atlaskit.d.ts"

The engine "node" is incompatible with this module. Expected version "^8.4.0". (yarn install)

I'm using node 9.11.1, but your package.json only allows node 8.x

react-circle/package.json

Line 10 in 57bb4d1

"node": "^8.4.0"

Centering bigger text

Just ran into an issue with enlarging the font-size and centering the percentage-text.

My standard css-tricks don't work here…

      <Circle
        progress={currentStateInPercent}
        progressColor={strokeColor(currentStateInPercent)}
        bgColor='#cccccc'
        lineWidth='40'
        roundedStroke={true}
        showPercentageSymbol={false}
        textColor='#bfbfbf'
        textStyle={{ 'font-size': '120px' }}
      />

If you want to make this project perfect, then it would be cool to have some easy way to adjust this…

Thanks again for your hard work!

About the limit of the lineWidth

@zzarcon
The current lineWidth is limited below 50 as the radius is fixed 175 and the viewBox with a fixed size 400. These make the circle limited to be sort of thin.

Keep the fixed size 400 and generate radius dynamicly by the proped lineWidth may free the limit, I mean, the circle can be able to be thicker enough.

Check this adapted file for example. Since it an aggressive change, I'd ask if you think this is necessary. I'd like to make a PR if so.

Add tests

There is currently Jest setup in the project but there are not test written 😅. Will be cool to have some coverage 💯

Stop deploying using the development version of webpack/react

See https://news.ycombinator.com/item?id=16904100

Performance issue in demo page

The demo page lags quite a lot when changing the percentage value. Did a small investigation and found that the cause might be the custom FieldRange that we are using.

A possible fix can be to use the native one