Skip to content

Latest commit

 

History

History
66 lines (60 loc) · 2.89 KB

README.md

File metadata and controls

66 lines (60 loc) · 2.89 KB

Progress Bar with React and Typescript

notes

  • Originally I was going to just use React but given the number of props, it made sense to use a typechecker. Using Jest for unit-testing was a no-brainer.
  • The progress bar is essentially broken up into a container (PureComponent) and presenter (Stateless Component), primarily so that the container manages state issues.
  • Listener and handleExternalUpdate callback for handling managing external state changes have been commented out, it felt adequate at this time to just show how they'd be used

improvement ideas/to-do's

  • Redux
  • Improve test coverage: currently am just ensuring components render properly based on props
  • Currently props overwrite css in progress-bar.css, would be better to make use of defaultProps
  • Add aria options to make the progress bar accessible?
  • Add option to make the progress bar continuous, like a loading icon?
  • The components could probably be named better

optional props to override CSS

name type default description
min number 0 custom progress bar minimum-starting point
max number 100 custom progress bar maximum-ending point
shouldSelfIncrement boolean false progress bar will increment automatically
selfIncrementInterval number 500ms if set to true, the interval time for auto incrementing
fillColor string #9DDB29 hex-color for progress bar foreground
bgColor string #f0ecec hex-color for progress bar background
borderStyle string 1px solid #f9f9f9 hex-color for progress bar border
borderRadius number 5px progress bar border-radius in px
height number 15px progress bar height
width number 500px progress bar width
transition number 600ms transition ease-in-out
demoMode boolean true displays increment buttons

Basic usage

import ProgressBarContainer from './progress-bar-container';

var component = React.createClass({
  render: function() {
    return (
      <div>
        <ProgressBarContainer />
      </div>
    );
  }
});

Setting min or max

<ProgressBarContainer min={20} max={75} />

A self-incrementing progress bar

<ProgressBarContainer 
  shouldSelfIncrement={true}
  selfIncrementInterval={70} 
/>

Using custom CSS

<ProgressBarContainer
  fillColor="#9ac3ff"
  height={25}
  borderRadius={30}
  borderStyle="2px solid #ccc"
/>