react-circular-input

We provide Hooks for implementing your own custom components! 🎉

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

useCircularInputContext

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)}
		</text>
	)
}

useCircularDrag

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

useCircularDrag(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)
	useCircularDrag(ref)

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