search

vydimitrov / react-countdown-circle-timer

Lightweight React/React Native countdown timer component with color and progress animation based on SVG
MIT License
692 stars 87 forks source link

Can create as a rectangular count down? #108

Closed shashankrepo closed 3 years ago

shashankrepo commented 3 years ago

Can we have width & height props instead of size?

vydimitrov commented 3 years ago

The path that animates is calculated as a circle and it can not be changed. To make sure that it is a circle we need the width and height to be the same. That is why there is one prop size to change.

If you want to change the path that animates you can fork the repo and change it here

shashankrepo commented 3 years ago

Can you please explain the path

const path = m ${halfSize},${halfStrokeWith} a ${arcRadius},${arcRadius} 0 ${rotationIndicator} 0,${arcDiameter} a ${arcRadius},${arcRadius} 0 ${rotationIndicator} 0,-${arcDiameter}

vydimitrov commented 3 years ago

You will need to define your rectangular as SVG points and pass them to the d attrbiute - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d. Some more info https://css-tricks.com/svg-path-syntax-illustrated-guide/

You will need to pass also pathLength - like if you want a square of 100px then the pathLength will be 4 * 100 = 400

The path above is composed of 2 arcs, which make the circle. 

vydimitrov commented 3 years ago

I am closing this issue. Please start a new discussion in case you have more questions.