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
141 Stars 7 Forks MIT License 108 Commits 0 Opened issues

Description

React components for easily composing a circular range input

Services available

!
?

Need anything else?

Contributors list

# 349,890
TypeScr...
HTML
Shell
gauge
80 commits
# 430,609
coreaud...
TypeScr...
CSS
knob
2 commits
# 355,124
JavaScr...
Shell
Firebas...
React N...
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.