@gorazdo/react-svg-donut
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

@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>
  )
}

Package Sidebar

Install

npm i @gorazdo/react-svg-donut

Weekly Downloads

0

Version

0.1.6

License

ISC

Unpacked Size

49.7 kB

Total Files

23

Last publish

Collaborators

  • carduelis