Unusable in React v16+

[juliangommans]

I'm trying to use this component currently but our app is > v16 and there is currently a crash that renders it unusable.

Element ref was specified as a string (progressBar) but no owner was set. You may have multiple copies of React loaded.

According to this document and a further investigation on my behalf, running npm ls react, this component is creating a new version of react inside the app that causes it to crash.

Would it be possible to fix this?

Thanks

[danielgefen]

Experiencing the same issue.. it would be helpful to have it fixed. Thanks

[jskrt]

@kimmobrunfeldt please update this

[KeweiCodes]

+1 Having the same issue.

[smitch88]

@KeweiCodes I dont feel like creating a PR but If you are using CRA this will work React 16.3+ as I am using it now after I converted it. This also fixes the wrong class name containerClassName on the container component. You can dump this in as a component and import ProgressBar from 'wherevecomponentwasput'

and use it like, where this.state.progress is a number between 0-1 like the docs

<ProgressBar.Line
     progress={this.state.progress}
     text="Loading..."
     options={{ strokeWidth: 4 }}
     initialAnimate={true}
/>

import React, { Component } from 'react';
import isEqual from 'lodash/isEqual';
import ProgressBar from 'progressbar.js';

class Shape extends Component {
  static defaultProps = {
    ShapeClass: null,
    options: {},
    progress: 0,
    text: null,
    initialAnimate: false,
    containerStyle: {},
    containerClassName: '.progressbar-container',
  };

  shape;

  progressBar = React.createRef();

  create(props, oldProps) {
    if (this.shape) {
      return;
    }

    // setState function is not used to prevent a new render cycle
    // This handling happens outside of React component's lifecycle
    const container = this.progressBar.current;
    this.shape = new props.ShapeClass(container, props.options);
    if (props.initialAnimate) {
      if (oldProps) {
        this.setProgress(oldProps.progress);
      }

      this.animateProgress(props.progress);
    } else {
      this.setProgress(props.progress);
    }

    this.setText(props.text);
  }

  destroy() {
    if (this.shape) {
      this.shape.destroy();
      this.shape = null;
    }
  }

  animateProgress(progress) {
    this.shape.animate(progress);
  }

  setProgress(progress) {
    this.shape.set(progress);
  }

  setText(text) {
    if (text) {
      this.shape.setText(text);
    }
  }

  componentDidUpdate(prevProps) {
    if (!isEqual(this.props.options, prevProps.options)) {
      this.destroy();
      this.create(this.props, prevProps);
    }
    this.animateProgress(this.props.progress);
    this.setText(this.props.text);
  }

  componentDidMount() {
    this.create(this.props, null);
  }

  componentWillUnmount() {
    this.destroy();
  }

  render() {
    const { style, containerClassName } = this.props;
    return <div className={containerClassName} style={style} ref={this.progressBar} />;
  }
}

class Line extends Component {
  render() {
    return <Shape {...this.props} ShapeClass={ProgressBar.Line} />;
  }
}

class Circle extends Component {
  render() {
    return <Shape {...this.props} ShapeClass={ProgressBar.Circle} />;
  }
}

class SemiCircle extends Component {
  render() {
    return <Shape {...this.props} ShapeClass={ProgressBar.SemiCircle} />;
  }
}

export default {
  Line,
  Circle,
  SemiCircle,
};

[jon-moreira]

Try to force on your package.json the url for this module like:

"react-progressbar.js" : "git+https://github.com/kimmobrunfeldt/react-progressbar.js.git"

• you need git installed

run this on your project root folder to update package.json and update the module to the master version

npm i react-progressbar.js@git+https://github.com/kimmobrunfeldt/react-progressbar.js.git --save

[danvln]

A comment that this does not work with React 16+ would be good in the description of this library.