how can i make this work on reactjs

[ionutale]

how can i make this work on reactjs ?

[itsmichaeldiego]

@jhonyourangel +1, I would love to use this library in web!

[ovidiudinu]

Me to pleeeease.

[nithin-aktivolabs]

badly need this lib in react JS...

[Quentinb]

I've cloned this package and got it working in ReactJS. Just having some trouble with the "sliding" or "scrolling" of the start and end icons. It works, but does not follow the mouse quite as well as expected yet.

[ionutale]

Can you provide a link? I could have a look at it

…

On Tue, 3 Jan 2023 at 18:28, Quentin Barnard ***@***.***> wrote: I've cloned this package and got it working in ReactJS. Just having some trouble with the "sliding" or "scrolling" of the start and end icons. It works, but does not follow the mouse quite as well as expected yet. [image: image] <https://user-images.githubusercontent.com/5852237/210409446-312f8079-b3ca-44b2-a38d-2e0935467b30.png> — Reply to this email directly, view it on GitHub <#33 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AATRTF4VJE3T7IMBDPIEXJTWQROSNANCNFSM4FQ5S2IA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Quentinb]

I'll play around some more with it today and then push the updates to git possibly tomorrow. It relates to calculating the new angle and length via the mouse X and Y. The old code does the calcs here, but I'm not quite sure what actual values moveX and moveY provide here. Are the relative to screen X/Y, or component X/Y etc...

onPanResponderMove: (evt, { moveX, moveY }) => {
  const { circleCenterX, circleCenterY } = this.state;
  const { angleLength, startAngle, onUpdate } = this.props;
  
  const currentAngleStop = (startAngle + angleLength) % (2 * Math.PI);
  let newAngle = Math.atan2(moveY - circleCenterY, moveX - circleCenterX) + Math.PI / 2;
  
  if (newAngle < 0) {
    newAngle += 2 * Math.PI;
  }
  
  let newAngleLength = currentAngleStop - newAngle;
  if (newAngleLength < 0) {
    newAngleLength += 2 * Math.PI;
  }

  onUpdate({ startAngle: newAngle, angleLength: newAngleLength % (2 * Math.PI) });
}

[Quentinb]

I've pushed a working version to https://github.com/Quentinb/react-web-circular-slider and published it on NPM https://www.npmjs.com/package/react-web-circular-slider.

Still needs a bit of work and cleanup but us currently in a functioning state.