react-circular-input

CircularInput

Provides all the logic and context for the children components.

The value is always between 0 and 1. This makes all interpolations and customisations easy to calculate. Check out the Examples.

Using this component by itself is not recommended as the library is most useful when it's used with composition.

<CircularInput
	value={value}
	radius={75}
	onChange={setOnChangeValue}
	onChangeEnd={setOnChangeEndValue}
/>

onChangeValue: 0.25
onChangeEndValue: 0.25

Props

✅ value: number // range: [0-1]
✅ radius?: number
✅ onChange?: (value: number) => any
✅ onChangeEnd?: (value: number) => any

// the following props are disallowed to support functionality:
🚫 ref
🚫 width
🚫 height
🚫 viewBox
🚫 onClick

// it's an <svg> under the hood
...HTMLProps<SVGSVGElement>

CircularProgress

Displays a circular segment to the value provided.

<CircularInput value={0.75}>

	<CircularProgress />

</CircularInput>

Props

// the following props are disallowed to support functionality:
🚫 ref
🚫 cx
🚫 cy
🚫 r
🚫 strokeDasharray
🚫 strokeDashoffset
🚫 transform

// it's an svg circle under the hood:
...SVGProps<SVGCircleElement>

CircularThumb

Displays a handle at the value point coordinates.

<CircularInput value={0.75}>

	<CircularThumb />

</CircularInput>

Props

// the following props are disallowed to support functionality:
🚫 ref
🚫 cx
🚫 cy

// it's an svg circle under the hood:
...SVGProps<SVGCircleElement>

CircularTrack

Displays the value circumference path.

This component by itself is not very exciting... 😅

<CircularInput value={0.75}>

	<CircularTrack />

</CircularInput>

Props

// the following props are disallowed to support functionality:
🚫 ref
🚫 cx
🚫 cy
🚫 r

// it's an svg circle under the hood:
...SVGProps<SVGCircleElement>

Looking to create your own custom component? Take a look at:

Hooks