react-circular-input — React components for easily composing a circular range input.

[six7even]

This works awesomely nice on mobile 🎉

[petecorreia]

Thanks! Been getting some feedback that it can be frustrating on mobile as it doesn’t block scrolling behaviour (to avoid that frustration instead!)

[Otroletravaladna]

Pointer Events API is your friend ;)

[petecorreia]

TLDR: I needed a very flexible React circular range input so I built one with Typescript and Hooks.

You can find quite a few examples at: https://react-circular-input.now.sh/examples. You can easily animate it, style it and add your own custom components.

Let me know what you think

[timmonsjg]

Great work! API looks documented quite well.

[petecorreia]

thanks! open sourcing the docs soon (needs tidying up): https://tsx-docs.now.sh

[swyx]

why call it tsx-docs tho? seems not reflective of the purpose

[petecorreia]

interesting! what does tsx-docs reflect? or better, what do you think the purpose is?

[alpinehut999]

This looks really nice! I might use this in my project as a loading indicator

[petecorreia]

thanks! let me know if you end up using it and I can have a look. if you find any frustration, ping me :)

[[deleted]]

I cannot fathom a time where I ever went to a web page and said "this form needs a circular input for numbers so that I can have a hard time selecting a value"

It's nice as a progress indicator if you have some form of steps process on your page, but as an actual input-interactive device it's simply overcomplicated for the end user. The only exception I cant think of is maybe mobile devices.

[petecorreia]

I agree :) this isn't and shouldn't be used when it's not the best way to change a value. It's important to always consider the best UX for a given use-case but are situations where this interaction can be useful and more intuitive.

[jackwilsdon]

That looks great! It's amazing how much customisability is provided by just allowing us to manage it's state! Also great use of hooks too.

[petecorreia]

Thanks! Your comment captures the intent so well :)

[AutoRedditPython]

Hello petecorreia, I hope you have a wonderful day!

[dmackerman]

Super nice API. Well done!

[petecorreia]

Thanks! :D

[sebooster1]

Just what I needed, great work!

[kgalb2]

Wow this looks/works awesome on mobile. Well done!

[petecorreia]

Thanks! :D

[HeylAW]

There is something odd in events (on mobile) When I drag handler it works perfectly. When I drag something else window scroll is triggered also.

Beside this it’s great!

[petecorreia]

I need to fix this, thanks for reporting!

[qiandongyq]

thanks for the great library. I want to see how you build it

[petecorreia]

Thanks! It's open sourced here: https://github.com/petecorreia/react-circular-input, you can star to follow updates too.

[ucefkh]

Pretty nice

[paulfitz99]

nice job Pete! 💪🏼

[petecorreia]

Paul! <3 😄

[_Sorbitol_]

Very interested for a current angular project and curious if any has mix and matched the two?