https://github.com/petecorreia/react-circular-input

React components for easily composing a circular range input
https://github.com/petecorreia/react-circular-input

circular gauge hooks knob radial react

Last synced: about 2 months ago
JSON representation

React components for easily composing a circular range input

• Host: GitHub
• URL: https://github.com/petecorreia/react-circular-input
• Owner: petecorreia
• License: mit
• Created: 2018-12-15T15:27:29.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-31T19:15:59.000Z (about 1 year ago)
• Last Synced: 2024-07-14T15:23:23.751Z (2 months ago)
• Topics: circular, gauge, hooks, knob, radial, react
• Language: TypeScript
• Homepage: https://react-circular-input.now.sh
• Size: 4.21 MB
• Stars: 172
• Watchers: 3
• Forks: 12
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# 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](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1)**:

[![Edit react-circular-input](https://codesandbox.io/static/img/play-codesandbox.svg)](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)