Awesome Open Source
Awesome Open Source

react-circular-input

React components for easily composing a circular range input

Latest Release Downloads Version MIT License

npm i react-circular-input

Animated example image (GIF)

Example

import {
	CircularInput,
	CircularTrack,
	CircularProgress,
	CircularThumb
} from 'react-circular-input'

export default () => {
	const [value, setValue] = useState(0.25)

	return (
		<CircularInput value={value} onChange={setValue}>
			<CircularTrack />
			<CircularProgress />
			<CircularThumb />
		</CircularInput>
	)
}

There's a lot more you can do with the library. From a simple gauge to a fully custom and animated circular input range.

Play around with examples at CodeSandbox:

Edit react-circular-input

A declarative and composable approach means we have a lot of flexibility, check out the documentation for how to go further!

Documentation

Full documentation at react-circular-input.now.sh.

Enjoy! 🎉


Contributing | Code of Conduct | MIT License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,218
react (5,371
hooks (255
circular (22
gauge (19