react-circular-input

React 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
`

Example

`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!

Documentation

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

- Examples
- Components
- Hooks

Enjoy! 🎉

---

Contributing
|
Code of Conduct
|
MIT License