joshjg / react-canvas-knob Goto Github PK

I think the build is broken. I installed the package and tried to include it in my project and I'm getting the above error. Taking a look inside index.js, it tries to import redbox-react, which I assume should not be part of the production build.

Hey Folks,

I'm using the react canvas knob component, and have everything working locally. When I make a production build, I get the folowing error:

index.js:51 Uncaught Error: locals[0] does not appear to be a moduleobject with Hot Module replacement API enabled. You should disable react-transform-hmr in production by usingenv section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr

A couple questions --
Is using react-transform-hmr needed? Dan Abramov's overall advice to avoid the error is to switch to https://github.com/gaearon/react-hot-loader

If it's not possible to change dependencies, we should document that this code will break in production environments/needs to have production configuration. Does this exist someplace and I missed it?

Thanks!

Hello,

Thanks for creating this. I have a problem hope that you may be able to guide me through.

I'd like to create a bunch of knobs with using a map function but I can't seem to send multiple parameters within the onChange function. I am trying to accomplish something like this:

 <Knob 
                    title ={MIDIParam.name}
                    height ={50}
                    width ={50}
                    max = {127}
                    font= {'Monaco'}
                    value={MIDIParam.ccv}
                    onChange={ctx.changeValue(MIDIParam.ccn)}
/>

any suggestions?

If you don't specify a callback for onChangeEnd, an error is thrown.

Uncaught TypeError: _this.props.onChangeEnd is not a function

I'm trying to use the cursor mode with the knob value to represent two pieces of information, one is the value field which is the primary value, and the other can be the width of the cursor(angle of the cursor sector).
I'm not able to change it dynamically based on some variable value

Failed to compile.
./node_modules/react-canvas-knob/index.js
Module not found: Can't resolve 'react-transform-catch-errors' in '/home/vvdn/my/node_modules/react-canvas-knob'

Hi there,

I'm currently trying to implement this into a responsive page, but once the knob is rendered the first time, I'm unable to update the width/heights, because they are only set once (inside the constructor).

Is there a implementation of componentWillReceiveProps() on the road map or a Pull Request of this feature already there?
If not, I'm willing to implement this feature, if you want. 🍻

Needs to use the new prop-types package.

Also, the onChangeEnd PropType throws a TypeError inside HandleMouseUp, removing it fixes and brakes nothing.

_this.handleMouseUp = function (e) {
//_this.props.onChangeEnd(_this.eventToValue(e));

Hi @joshjg! Thank you for putting out this component! Wondering if there is a demo link or an example integration that one can play with?

Hi @joshjg! I was wondering if it is possible to expose events that distinguish between dragging and end of dragging? This could be done by exposing onChangeComplete for the latter and onChange works for the former or by exposing two new events to indicate the two different events.

I was planning to use this for volume and progress controls for a media player. And for that, I needed to know when the dragging has stopped and use that value.

Thank you!

Is it possible to use this component to create a knob that is centered at the top and moves clockwise or counterclockwise depending on which side of the knob you are on?

I tried combining two separate knobs to do this but didn't have any luck.

Currently if you look at this on a screen where the window.devicePixelRatio > 1 (e.g. a MacBook Pro or an iPhone) the arc drawn on the canvas is blurry.

I believe the fix is to scale the canvas by the devicePixelRatio then set it back to regular size with css. See https://www.html5rocks.com/en/tutorials/canvas/hidpi/ for more details.

I have multiple knobs on one page, when I click+drag or scroll all the knobs change and they all have the same value. How do I click and control them separately? Thanks.

Hi,

I want to show a center value with % symbol like 59%. any one helps to me this issue. how to create a component and how to pass the display custom attribute.