petecorreia / React Circular Input
Licence: mit
React components for easily composing a circular range input
Stars: ✭ 141
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Circular Input
Ajax Hook
🔱 Intercepting browser's AJAX requests which made by XMLHttpRequest.
Stars: ✭ 1,900 (+1247.52%)
Mutual labels: hooks
Hookish
Hooks in to interesting functions and helps reverse the web app faster.
Stars: ✭ 129 (-8.51%)
Mutual labels: hooks
React Atom
A simple way manage state in React, inspired by Clojure(Script) and reagent.cljs
Stars: ✭ 133 (-5.67%)
Mutual labels: hooks
React Native Music App
React Native Music Application Example
Stars: ✭ 127 (-9.93%)
Mutual labels: hooks
Use Is In Viewport
A react hook to find out if an element is in a given viewport with a simple api.
Stars: ✭ 129 (-8.51%)
Mutual labels: hooks
Circular Audio Wave
JS library for audio visualization in circular wave using Web Audio API and ECharts
Stars: ✭ 131 (-7.09%)
Mutual labels: circular
Uicircularprogressring
A circular progress bar for iOS written in Swift
Stars: ✭ 1,658 (+1075.89%)
Mutual labels: circular
Gps Overlay On Video
Telemetry (GPS) data overlay on videos
Stars: ✭ 136 (-3.55%)
Mutual labels: gauge
Use Interval
A custom React Hook that provides a declarative setInterval called useInterval.
Stars: ✭ 127 (-9.93%)
Mutual labels: hooks
React Use Scrollspy
Flexible React Hook to automatically update navigation based on scroll position
Stars: ✭ 133 (-5.67%)
Mutual labels: hooks
Jocircularslider
A highly customisable and reusable circular slider for iOS applications.
Stars: ✭ 128 (-9.22%)
Mutual labels: circular
Mern Authentication
MERN stack authentication boilerplate: password reset, email verification, server sessions, redux, hooks and docker for dev and prod.
Stars: ✭ 129 (-8.51%)
Mutual labels: hooks
Circle Flags
A collection of 300+ minimal circular SVG country flags
Stars: ✭ 139 (-1.42%)
Mutual labels: circular
Use Less
React hooks that help you do what you already did, with more indirection
Stars: ✭ 135 (-4.26%)
Mutual labels: hooks
Tipple
A lightweight dependency-free library for fetching data over REST with React.
Stars: ✭ 133 (-5.67%)
Mutual labels: hooks
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 />
<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:
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! 🎉
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].