How can i add this progress bar js in my react app (beginner)

January 25, 2022

Hello there i want to add the progress bar js in my react application but I don’t know how to do it , iam a beginner can someone please provide some help ?
the progressbarjs : is from https://kimmobrunfeldt.github.io/progressbar.js/
so basically i must add this js code somewhere in my react :

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
  }
});

bar.animate(1.0);

how to manage it please ?

>Solution :

It most probably wouldn’t work as React doesn’t know what ProgressBar is unless you include it in the project. It seems that it’s API is rather ‘low-level’ so why don’t you look for some React made progress bars out there? Maybe it’ll suit your needs better.

You can check out for example MUI, Bootstrap or some of the other options out there.