React SVG Donuts

A React component for simple (and complex) SVG donuts.

The current version depends on the Hooks API introduced with React 16.8. If you need legacy React support, please use a 1.x.x version.

Visitor stats

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit

Demo

TL;DR here is the demo

Dependencies

NodeJS
NPM / Yarn
React and ReactDOM
A ReactJS application

Usage

First install the package

$ npm i react-svg-donuts

# or

$ yarn add react-svg-donuts

Then

import React from 'react';

import { Donut, ComplexDonut } from 'react-svg-donuts';

// The donut will be half filled
const progress = 50;

// The value will be wrapped inside a <strong> tag.
const renderProgress = progress => <strong>{progress}%</strong>;

const MyComponent = () => (
	<>
		<Donut progress={progress} onRender={renderProgress} />, document.getElementById('demo')
		<ComplexDonut
			size={200}
			parts={[
				{
					color: '#FF8A80',
					value: 230
				},
				{
					color: '#FF80AB',
					value: 308
				},
				{
					color: '#B9F6CA',
					value: 520
				},
				{
					color: '#B388FF',
					value: 130
				},
				{
					color: '#8C9EFF',
					value: 200
				}
			]}
			radius={80}
			thickness={40}
			startAngle={-90}
		/>
	</>
);

Props

Donut props

Prop	Type	Required	Default	Description
`prefix`	`string`	false	'donut'	String used as a prefix for the CSS class names
`progress`	`number`	false	0	A number between 0 and 100
`onRender`	`Function`	false	(progress) => {progress}	Function which runs after the Donut is rendered and returns a ReactNode

Complex donut props

Prop	Type	Required	Default	Description
size	number	false	160	The width and height of the donut
parts	{ color: string; value: number; }[]	false	[]	The donut parts
radius	number	false	60	The radius of the element
className	string	false	''	Custom CSS class name for the Donut
thickness	number	false	30	Stroke width of the element
textProps	SVGProps for SVGTextElement	false	{}	Additional props for the element
startAngle	number	false	-90	Number between -360 and 360
circleProps	SVGProps for SVGCircleElement	false	{}	Additional props for the element

CSS

There is a predefined stylesheet which can be used as is. If you want it, just import it:

@import 'react-svg-donuts/src/index.css';

import 'react-svg-donuts/src/index.css';

LICENSE

MIT

Connect with me:

Support and sponsor my work:

Go back