@ossamaweb/react-circular-input
Version:
Forked react-circular-input
70 lines (50 loc) • 2.02 kB
Markdown
# 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
```
<a href="https://react-circular-input.now.sh"><img src="https://react-circular-input.now.sh/social-example.gif" alt="Animated example image (GIF)"></a>
## Example
```tsx
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](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1)**:
[](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1)
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](https://react-circular-input.now.sh)**.
- [Examples](https://react-circular-input.now.sh/examples)
- [Components](https://react-circular-input.now.sh/components)
- [Hooks](https://react-circular-input.now.sh/hooks)
Enjoy! 🎉
---
[Contributing](CONTRIBUTING.md)
|
[Code of Conduct](CODE_OF_CONDUCT.md)
|
[MIT License](LICENSE.md)