Need help with react-circular-input?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

petecorreia
148 Stars 9 Forks MIT License 112 Commits 4 Opened issues

Description

React components for easily composing a circular range input

Services available

!
?

Need anything else?

Contributors list

# 336,812
HTML
Shell
CSS
gauge
82 commits
# 434,369
C++
C
coreaud...
knob
2 commits
# 358,362
Shell
Firebas...
React N...
TypeScr...
2 commits

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></circulartrack>
        <circularprogress></circularprogress>
        <circularthumb></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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.