Open juliangommans opened 6 years ago
Experiencing the same issue.. it would be helpful to have it fixed. Thanks
@kimmobrunfeldt please update this
+1 Having the same issue.
@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,
};
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"
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
A comment that this does not work with React 16+ would be good in the description of this library.
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