react-circular-input

React components for easily composing a circular range input

npm i react-circular-input

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:

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