How can I use this with React?

[bobdeei]

I've install react-progressbar.js but has no idea how it should work with React.

Can you provide me an example on how to make it work with React?

Thank you Duy

[bobdeei]

Oh it seems like the React package is deprecated now. It has not been supported for 3 years.

I'm sorry about that. I should have checked the last published date first :)

[dudesl]

@bobdeei you could find some way to integrate the actual release with React? I'm working with SSR and isomorphic JS and i'm not pretty sure how to integrate.

[arya-s]

You can easily use it with react, example:

import React, { useEffect, useMemo, useCallback } from 'react';
import { Circle } from 'progressbar.js';

const wrapper = document.createElement('div');

const ProgressCircle = ({ animate }) => {
  const bar = useMemo(
    () =>
      new Circle(wrapper, {
        strokeWidth: 6,
        easing: 'easeInOut',
        duration: 1400,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 1,
        svgStyle: null,
      }),
    []
  );

  const node = useCallback(node => {
    if (node) {
       node.appendChild(wrapper);
    }
  }, []);

  useEffect(() => {
    bar.animate(animate);
  }, [animate, bar]);

  return <div ref={node} />;
};

export default ProgressCircle;

And usage:

const RandomCircle = () => {
    const [animate, setAnimate] = useState(0.0);
    return (
        <div>
            <ProgressCircle animate={animate}/>
            <button onClick={() => setAnimate(Math.random())}>Animate</button>
        </div>
    );
};

[cybersmithio]

All the examples ProgressBar.js has, saying it works with React. Spent 2 hours with no luck. Took all of 30 seconds with the help of @arya-s . Thank you!