As a newcomer to the world of ReactJS, I have been exploring the FB documentations and online tutorials to kickstart my test project.
Within this project, I wanted to implement a progress bar that visually represents the user's progression through filling out forms across three pages. Everything was going smoothly until I decided to add some transition effects to enhance the progress bar.
I wrote the code below with the intention of passing a prop from the parent component to the child progressBar component to determine the percentage completion of the progress bar.
In the constructor, I initialized the default width to 0 and updated it in componentDidMount based on the percentage received from the parent. While I successfully managed to set the style, unfortunately, the transition effect did not seem to work as expected. My aim was to create a sleek progress bar that smoothly transitions from 0% width to the specified percentage provided via props.
Here is how my code looks:
ProgressBar component
import './style.scss';
import React from 'react';
import classnames from 'classnames';
class ProgressBar extends React.Component {
constructor(props) {
super(props);
this.state = { progressionStyle : { } }
}
componentDidMount() {
this.setState({
progressionStyle : {
width: this.props.progression,
transition: 'all 1500ms ease'
},
scene1: (this.props.scene1 === 'active') ? 'active' : (this.props.scene1 === 'done') ? 'done' : '',
scene2: (this.props.scene2 === 'active') ? 'active' : (this.props.scene2 === 'done') ? 'done' : '',
scene3: (this.props.scene3 === 'active') ? 'active' : (this.props.scene3 === 'done') ? 'done' : ''
});
}
render() {
return (
<div className="progress-bar">
<div className="progress-bar__inner">
<div className="progress-bar__progress">
<div className={classnames('progress-bar__progress-fill', this.props.active)} style={this.state.progressionStyle}></div>
</div>
<div id="scene1" className="progress-bar__element">
<i className={classnames('progress-bar__icon', this.state.scene1)}></i>
<span className="progress-bar__label">Scene 1</span>
</div>
<div id="scene2" className="progress-bar__element">
<i className={classnames('progress-bar__icon', this.state.scene2)}></i>
<span className="progress-bar__label">Scene 2</span>
</div>
<div id="scene3" className="progress-bar__element">
<i className={classnames('progress-bar__icon', this.state.scene3)}></i>
<span className="progress-bar__label">Scene 3</span>
</div>
</div>
</div>
);
}
}
export default ProgressBar;