petecorreia / react-circular-input Goto Github PK
View Code? Open in Web Editor NEWReact components for easily composing a circular range input
Home Page: https://react-circular-input.now.sh
License: MIT License
React components for easily composing a circular range input
Home Page: https://react-circular-input.now.sh
License: MIT License
Hi ,
I was trying to implement the animated example using react-spring from CodeSandbox https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1&file=/src/index.tsx . But it gave me error when i tried to pass props.value to the <CircularInput value={props.value}
. The error is Type SpringValue<number> is not assignable to type 'number'
But as soon as i downgraded react-spring to v8.0.27 (this is what is used in your example) . It started working
Please update the react-spring library and its corresponding implementation in examples so that developers don't get confused
Here is the code for reference
<Spring to={{ value }} config={config.slow}>
{props => (
<CircularInput value={props.value} radius={75} onChange={setValue}>
<CircularProgress
strokeWidth={45}
stroke={`rgba(61, 153, 255, ${props.value})`}
/>
<CircularThumb
fill="white"
stroke="rgb(61, 153, 255)"
strokeWidth="5"
/>
<CustomComponent />
</CircularInput>
)}
</Spring>
First, this library is awesome!
Two questions:
How can I prevent dragging past min and max? The overflow makes it really hard to set 100% or 0%. I was thinking about using the hooks to test if the new value is moving past a certain coordinate?
How can I rotate the input so that it starts somewhere other than the top? What if I want the input to start and stop at different points? Say start at 190deg and end at 170deg?
How does one go about creating a controlled component, e.g. one where the value can be changed externally?
As a simple example, here's the sample code from README with an additional button:
import {
CircularInput,
CircularTrack,
CircularProgress,
CircularThumb
} from 'react-circular-input'
export default () => {
const [value, setValue] = useState(0.25)
return (
<>
<button
type="button"
onClick={() => { setValue(v => v + 12 }}
>
add 12
</button>
<CircularInput value={value} onChange={setValue}>
<CircularTrack />
<CircularProgress />
<CircularThumb />
</CircularInput>
</>
)
}
The component flickers when the value changes but does not update. It looks like we can only set the value initially and from then on there's no way to update it?
Hey, I want to add a feature to react circular input.
Can you please guide me how do I run the local development environment easily so I can reflect the changes I do in the code some rendered example? thanks.
(this is the first time I contribute to a project with such structure)
I'm getting the defaultProps warning for CircularTrack and CircularProgress.
Warning: CircularTrack: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Warning: CircularProgress: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
I've attempted to modify the code like the below, but no luck. Does anyone have any ideas on how to resolve this?
import { CircularTrack } from 'react-circular-input';
const ModifiedCircularTrack = ({
stroke='#fff',
fill='#fff',
strokeWidth='1',
strokeLinecap='round',
...props
}) => {
return (
<CircularTrack
stroke={stroke}
fill={fill}
strokeWidth={strokeWidth}
{...props}
/>
);
};
export default ModifiedCircularTrack;
When i tried to rotate my circular from css it make a rotation but i my input range remain there
Hi,
Thanks for this awesome library!
Problem: I want to have an initial progress component that is read-only and styled with a lighter color. It is used as a reference to the previous value submitted.
Is it possible to have an additional <CircularProgress />
within CircularInput
that takes a different value
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.