React components for easily composing a circular range input
npm install react-circular-inputReact components for easily composing a circular range input
[![Latest Release][github-release]][npm]
[![Downloads][downloads-badge]][npm]
[![Version][version-badge]][npm]
[![MIT License][license]](LICENSE.md)
[npm]: https://npmjs.com/package/react-circular-input
[downloads-badge]: https://flat.badgen.net/npm/dt/react-circular-input
[version-badge]: https://flat.badgen.net/npm/v/react-circular-input
[license]: https://flat.badgen.net/badge/license/MIT/blue
[github-release]: https://flat.badgen.net/github/release/petecorreia/react-circular-input
``sh`
npm i react-circular-input
`tsx
import {
CircularInput,
CircularTrack,
CircularProgress,
CircularThumb
} from 'react-circular-input'
export default () => {
const [value, setValue] = useState(0.25)
return (
)
}
``
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:

A declarative and composable approach means we have a lot of flexibility, check out the documentation for how to go further!
Full documentation at react-circular-input.now.sh.
- Examples
- Components
- Hooks
Enjoy! 🎉
---