@gorazdo/react-svg-donut
Basics
Minimal reproduction
import { SvgDonut } from '@gorazdo/react-svg-donut'
const JustDonut = () => <SvgDonut innerRadius={90} outerRadius={100} />
Relative units
import { SvgDonut } from '@gorazdo/react-svg-donut'
const RelativeUnitsDonut = () => <SvgDonut innerRadius={5} outerRadius={5.5} unit="em" />
value
property is for partial circle and animation
import { SvgDonut } from '@gorazdo/react-svg-donut'
const AlmostClosedDonut = () => <SvgDonut value={0.9} innerRadius={90} outerRadius={100} />
Each circle is a Donut with zero innerRadius
import { SvgDonut } from '@gorazdo/react-svg-donut'
const AlmostClosedCircle = () => <SvgDonut value={0.9} innerRadius={0} outerRadius={100} />
Animated example
import { SvgDonut } from '@gorazdo/react-svg-donut'
import { useTween } from 'react-use'
const AnimatedDonut = () => {
// changes 0 to 1 using requestAnimationFrameRate
const tween = useTween('quadratic', 1000)
return <SvgDonut innerRadius={90} outerRadius={100} value={tween} color="#0047FF" />
}
Note
This package is meant to be super simple. If you'd like to have multiple concentric donuts, just use css grid or absolute positioning
.donut-wrapper {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
place-items: center;
}
.donut-wrapper svg {
grid-row-start: 1,
grid-column-start: 1,
}
import { SvgDonut } from '@gorazdo/react-svg-donut'
import { useTween } from 'react-use'
const ConcentricDonuts = () => {
// changes 0 to 1 using requestAnimationFrameRate
const tween = useTween('quadratic', 1000)
return (
<div className="donut-wrapper">
<SvgDonut value={tween} innerRadius={90} outerRadius={100} value={tween} color="#0047FF" />
<SvgDonut value={tween} innerRadius={70} outerRadius={80} value={tween} color="#00FF47" />
<SvgDonut value={tween} innerRadius={0} outerRadius={50} value={tween} color="#FF4700" />
</div>
)
}