Wondering what’s next for npm?Check out our public roadmap! »

react-circular-inputTypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

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 />
			<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:

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

Install

npm i react-circular-input

DownloadsWeekly Downloads

418

Version

0.2.2

License

MIT

Unpacked Size

43.1 kB

Total Files

27

Last publish

Collaborators

  • avatar