We provide Hooks for implementing your own custom components! 🎉

⚠️ The hooks below can only be used by children of CircularInput.


Gives you access to the same context used by the components so you can create custom ones. 🙂

It returns computed values and utility functions that should be enough to build any custom component.

const {
	value,						// current value
	radius,						// radius in px
	center,						// {x,y} of center
	isFocused,					// is input focused state
	setFocused,					// set input focused state
	onChange,					// onChange handler
	getPointFromValue, 			// util: returns {x,y} of current value
	getValueFromPointerEvent, 	// util: returns the nearest value to the given pointer event
} = useCircularInputContext()

// Example of a custom component to display text on top of the thumb

const CustomComponent = () => {
	const { getPointFromValue, value } = useCircularInputContext()
	const { x, y } = getPointFromValue()

	return (
		<text x={x} y={y} style={{ pointerEvents: 'none' }}>
			{Math.round(value * 100)}


Useful to make custom elements an input to dragging.

Adds event listeners to an element ref to fire the CircularThumb onChange on click and drag with the nearest value.

Adds/removes listeners as needed so you don't have to worry about that complexity.

CircularThumb uses this hook: View source

const ref = useRef(null) // your element ref


// ...on click/drag it's going to update value
// to the nearest point in the value circumference

// Example of a custom thumb component

const CustomThumb = () => {
	const { getPointFromValue } = useCircularInputContext()
	const { x, y } = getPointFromValue()

	const ref = useRef(null)

	return <circle ref={ref} cx={x} cy={y} r={20} />