score:1

Accepted answer

the package is a bit outdated, so it is based on an older version of react that allowed refs to be simple strings. newer versions of react (as the one your are probably using) does not allow that anymore, hence the error.

see: element ref was specified as a string (map) but no owner was set

you should either:

  1. downgrade your react version (i would not suggest to use an older version just to use an outdated dependency)
  2. use a different library (a quick google search revelead a lot of react progressbar packages)
  3. use the javascript version of this library, and wrap the functionalty inside a custom react component

something along the lines of

import { circle } from 'progressbar.js'

export default class circleprogress extends react.component<props, state> {
    

   componentdidmount() {
     var bar = new circle('#container', {easing: 'easeinout'});
     bar.animate(1);
   }

   render() {
     return (
       <div id="container"></div>
     )
   }
}

score:1

@gbalduzzi 's answer is the right and accepted one. i still wanted to post a full working example with a custom .svg image:

import react from 'react';
import progressbar from 'progressbar.js';

export default class customprogressshape extends react.component {
  componentdidmount() {
    var svgpath = document.getelementbyid('heart-path');
    var path = new progressbar.path(svgpath, {
      easing: 'easeinout',
      duration: 5000,
      step: function(state, circle) {
        if (circle.value() === 1) {
          circle.set(0);
          circle.animate(1.0);
        }
      },
    });
    path.set(0);
    path.animate(1.0);
  }

  render() {
    return (
      <>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewbox="0 0 100 100">
          <path
            fill-opacity="0"
            stroke-width="0.5"
            stroke="#f4f4f4"
            d="m81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032c44.74,13.612,29.879,8.657,18.511,13.923  c6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  c99.387,33.883,93.598,19.539,81.495,13.923z"
          />
          <path
            id="heart-path"
            fill-opacity="0"
            stroke-width="0.6"
            stroke="#555"
            d="m81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032c44.74,13.612,29.879,8.657,18.511,13.923  c6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  c99.387,33.883,93.598,19.539,81.495,13.923z"
          />
        </svg>
        <div id="container"></div> <div id="heart-path2"></div>
      </>
    );
  }
}

Related Query

More Query from same tag