Top
ProgressBar API - API
ProgressBar API
Props (18)
Styling Props (10)
1|-1
default: 1
Set fill direction, default is from left to right, or in case of vertical from bottom up.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = { direction: false }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.direction}
          onChange={direction => this.setState({ direction })}
        >Change direction to -1</CheckBox>
      </div>
      <code>direction = {this.state.direction ? '-1' : '1'}</code>
      <ProgressBar
        value={20}
        direction={this.state.direction ? -1 : 1}
      />
    </div>
  }
}

export default () => <App />
Bool
default: undefined
Sets whether progress is made continuously or in steps, with a threshold value of step.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NumericInput from '@zippytech/react-toolkit/NumericInput'
  import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      incrementInSteps: false,
      value: 0
    }
  }

  render() {
    return <div>
      <div>
        <CheckBox
          checked={this.state.incrementInSteps}
          onChange={(incrementInSteps) => this.setState({incrementInSteps})}
          style={{marginBottom: 20}}
        >
          incrementInSteps
        </CheckBox>
        <div style={{marginBottom: 20}}>
            <div>
              value
            </div>
            <NumericInput
              style={{ width: 70 }}
              minValue={0} maxValue={100}
              value={this.state.value}
              onChange={(value) => this.setState({ value })}
            />
          </div>
      </div>
      <ProgressBar
        incrementInSteps={this.state.incrementInSteps}
         value={40} step={10}
        value={this.state.value}
      />
    </div>
  }
}
export default () => <App />
Bool
default: false
Whether the <ProgressBar /> is in indeterminate state.
See indeterminateBarStyle to style the moving bar.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'



class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      indeterminate: undefined
      
    }
  }

  render() {
    return <div>
      <div>
        <CheckBox
          checked={this.state.indeterminate}
          onChange={(indeterminate) => this.setState({indeterminate})}
          style={{marginBottom: 20}}
        >
          indeterminate
        </CheckBox>
        
      </div>
      <ProgressBar
        indeterminate={this.state.indeterminate}
         value={40}
        
      />
    </div>
  }
}
export default () => <App />
React.Node|Fn({ domProps, value }): React.Node
default: undefined
Customize the label, which by default equals the value.
Label can be rendered with inverted colors, depending on where it is positioned, in fill or remaining part of the <ProgressBar />.
Return new React.Node or return undefined and mutate domProps.
If it returns undefined the mutated domProps are applied on the default implementation
If the label is or returns null|false it won't be rendered.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'

function label({ domProps, value }) {
  return <i {...domProps}>{value}</i>
}

export default () => <div>
  <ProgressBar value={40} style={{marginBottom: 20}}/>
  <ProgressBar value={40} label={label} style={{marginBottom: 20}}/>
  <ProgressBar value={40} labelPosition="start" />
</div>
String
default: "end"
Specifies the position of label. It can have the following values:
  • start - absolute start; eg. for horizontal, label is on the absolute left part of the progress bar
  • center - absolute center; eg. for horizontal, label is on the absolute center part of the progress bar
  • end - absolute end; eg. for horizontal, label is on the absolute right part of the progress bar
  • fillCenter - placed center relative to fill portion
  • fillEnd - placed at the end of fill portion, in this case it will follow the progress bar
  • remainingStart - placed at the start of empty portion, follows empty portion
  • remainingCenter - placed center relative to empty portion
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

const labelPositions = ['start', 'end', 'center', 'fillCenter', 'fillEnd', 'remainingStart', 'remainingCenter']
  .map((position) => { return { id: position, label: position }})

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      value: 40,
      labelPosition: 'end'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>
      <div style={{marginBottom: 20, width: 225}}>
        labelPosition
        <ComboBox
          autoBlur
          dataSource={labelPositions}
          value={this.state.labelPosition}
          onActiveItemChange={(labelPosition) => this.setState({labelPosition})}
        />
      </div>
      <div style={{marginBottom: 20}}>
        <ProgressBar value={this.state.value} labelPosition={this.state.labelPosition} />
      </div>
    </div>
  }
}
export default () => <App />
Number
default: 100
Min value of progress. Can be any numeric value larger than min
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends Component {

  constructor(props) {
    super(props)
    this.state = { value: 0, max: 100 }
  }

  render() {
    return <div>
    <div style={{ marginBottom: 20 }}>
      <div>
        max
      </div>
      <ComboBox
        style={{width: 100, marginBottom: 20}}
        value={this.state.max}
        autoBlur
        dataSource={[
          {id: 10, label: '10'},
          {id: 20, label: '20'},
          {id: 100, label: '100'},
        ]}
        onChange={(max) => this.setState({max})}
      />
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>
    </div>
    <ProgressBar
      transition={false}
      value={this.state.value}
      max={this.state.max}
    />
  </div>
  }
}

export default () => <App />
Number
default: 0
Min value of progress. Can be any numeric value smaller than max
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends Component {

  constructor(props) {
    super(props)
    this.state = { value: 0, min: 0 }
  }

  render() {
    return <div>
    <div style={{ marginBottom: 20 }}>
      <div>
        min
      </div>
      <ComboBox
        style={{width: 100, marginBottom: 20}}
        value={this.state.min}
        autoBlur
        dataSource={[
          {id: 0, label: '0'},
          {id: 20, label: '20'},
          {id: 50, label: '50'},
        ]}
        onChange={(min) => this.setState({min})}
      />
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>
    </div>
    <ProgressBar
      transition={false}
      value={this.state.value}
      min={this.state.min}
    />
  </div>
  }
}

export default () => <App />
vertical|horizontal
default: "horizontal"
Specifies the orientation of the <ProgressBar />.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = { orientation: false }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.orientation}
          onChange={orientation => this.setState({ orientation })}
        >Change to vertical</CheckBox>
      </div>
      <div style={{marginBottom: 20}}>
        <code>orientation = {this.state.orientation ? 'vertical' : 'horizontal'}</code>
        <ProgressBar
          value={20}
          orientation={this.state.orientation ? 'vertical' : 'horizontal'}
          fillStyle={{ background: 'rgba(8, 4, 255, 0.7)' }}
        />
      </div>
    </div>
  }
}

export default () => <App />
Fn({ domProps, index, from, to }): React.Node
default: undefined
Custom render for step.
from and to represent, in percentage, the position of the step.
Return new React.Node or return undefined and mutate domProps.
If it returns undefined the mutated domProps are applied on the default implementation
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

function renderStep({ domProps, index }) {
  const color = index > 8 ? 'red' :
    (index > 5 ? 'gold' : 'green')
  domProps.style.background = color;
  domProps.style.opacity = 0.6;
}

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      value: 45
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>

      <ProgressBar
        incrementInSteps={false}
        step={10}
        value={this.state.value}
        renderStep={renderStep}
        fillColor={'rgba(0, 0, 0, 0.9)'}
      />
    </div>
  }
}

export default () => <App />
Fn({ domProps, index, from }): React.Node
default: undefined
Custom render for tick.
from represent, in percentage, the position of the tick.
Return new React.Node or return undefined and mutate domProps.
If it returns undefined the mutated domProps are applied on the default implementation
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

function renderTick({ domProps, index }) {
  const style = {
    position: 'absolute',
    bottom: '100%',
    left: 0,
    transform: 'translateX(-50%)',
    color: index > 8 ? 'red' :
      (index > 5 ? 'gold' : 'green')
  }

  domProps.children = <span style={style}>{index  * 10 }</span>
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 45
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 40 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>

      <ProgressBar
        tick={10}
        value={this.state.value}
        renderTick={renderTick}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
If true it will rotate the label with 90 degrees .
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'



class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rotateLabel: undefined
      
    }
  }

  render() {
    return <div>
      <div>
        <CheckBox
          checked={this.state.rotateLabel}
          onChange={(rotateLabel) => this.setState({rotateLabel})}
          style={{marginBottom: 20}}
        >
          rotateLabel
        </CheckBox>
        
      </div>
      <ProgressBar
        rotateLabel={this.state.rotateLabel}
         value={40}
        
      />
    </div>
  }
}
export default () => <App />
Bool
default: false
Alias for direction=-1.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'



class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rtl: undefined
      
    }
  }

  render() {
    return <div>
      <div>
        <CheckBox
          checked={this.state.rtl}
          onChange={(rtl) => this.setState({rtl})}
          style={{marginBottom: 20}}
        >
          rtl
        </CheckBox>
        
      </div>
      <ProgressBar
        rtl={this.state.rtl}
         value={40}
        
      />
    </div>
  }
}
export default () => <App />
Bool
default: true
Whether to render an element for each step. These elements are rendered on top of <ProgressBar /> body.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'



class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSteps: true
      
    }
  }

  render() {
    return <div>
      <div>
        <CheckBox
          checked={this.state.showSteps}
          onChange={(showSteps) => this.setState({showSteps})}
          style={{marginBottom: 20}}
        >
          showSteps
        </CheckBox>
        
      </div>
      <ProgressBar
        showSteps={this.state.showSteps}
         step={10} value={40}
        
      />
    </div>
  }
}
export default () => <App />
Bool
default: true
Whether to render an element for each tick. These elements are rendered on top of <ProgressBar /> body.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'



class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showTicks: true
      
    }
  }

  render() {
    return <div>
      <div>
        <CheckBox
          checked={this.state.showTicks}
          onChange={(showTicks) => this.setState({showTicks})}
          style={{marginBottom: 20}}
        >
          showTicks
        </CheckBox>
        
      </div>
      <ProgressBar
        showTicks={this.state.showTicks}
         value={20} tick={10}
        
      />
    </div>
  }
}
export default () => <App />
Number|Fn(props, state): Number
default: undefined
Size of a step, it has to be in the min-max interval. Steps can have same length, using a single value, or variable lengths with an array of numbers.
Steps are used to split <ProgressBar /> into parts. For each step an element is rendered, its element size is relative to this value.
They can be used to constrain value into steps. See incrementInSteps
showSteps must be true for steps to be rendered.
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      value: 40
    }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          minValue={0} maxValue={100}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>
      <div>
        <code style={{ marginTop: 10 }}>step=[20, 30, 50]</code>
      </div>
      <ProgressBar step={[20, 30, 50]} value={this.state.value} style={{marginBottom: 20}}/>
      <code style={{ marginTop: 10 }}>step=10</code>
      <ProgressBar step={10} value={this.state.value}/>
    </div>
  }
}

export default () => <App />
Number|Fn(props, state): Number
default: "step"
Size of a tick, it has to be in the min-max interval. Ticks can have same length, using a single value, or variable lengths with an array of numbers.
Ticks are used to render lines, that are agnostic from step. By default they take values defined for step.
showTicks must be true for ticks to be rendered.
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      value: 40
    }
  }

  render() {
    return <div>
    <div style={{ marginBottom: 20 }}>
      <div>
        value
      </div>
      <NumericInput
        style={{ width: 70 }}
        minValue={0} maxValue={100}
        value={this.state.value}
        onChange={(value) => this.setState({ value })}
      />
    </div>
    <code style={{ marginTop: 10 }}>tick=10, step=[20, 30, 50]</code>
    <ProgressBar step={[20, 30, 50]} tick={10} value={this.state.value} style={{marginBottom: 20}}/>
    <code style={{ marginTop: 10 }}>tick=[20, 30, 50], step=10</code>
    <ProgressBar step={10} tick={[20, 30, 50]} value={this.state.value}/>
  </div>
  }
}

export default () => <App />
Bool
default: false
Whether fill/remaining parts size change is animated when value changes.
To see transition, change value.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import NumericInput from '@zippytech/react-toolkit/NumericInput'
  import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      transition: true,
      value: 0
    }
  }

  render() {
    return <div>
      <div>
        <CheckBox
          checked={this.state.transition}
          onChange={(transition) => this.setState({transition})}
          style={{marginBottom: 20}}
        >
          transition
        </CheckBox>
        <div style={{marginBottom: 20}}>
            <div>
              value
            </div>
            <NumericInput
              style={{ width: 70 }}
              minValue={0} maxValue={100}
              value={this.state.value}
              onChange={(value) => this.setState({ value })}
            />
          </div>
      </div>
      <ProgressBar
        transition={this.state.transition}
         step={10}
        value={this.state.value}
      />
    </div>
  }
}
export default () => <App />
Number|String
default: undefined
Value can be from min to max. Value of '100%' represents the maximum value
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      value: 40
    }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          minValue={0} maxValue={100}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>
      <ProgressBar value={this.state.value}/>
    </div>
  }
}

export default () => <App />
String|Fn(props): String
default: undefined
Set fill background, it is overwritten by fillStyle.
If labelRemainingColor it not set, it will default to fillColor.
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

function fillColor({ value }) {
  const hue=((100 - value) * 1.2).toString(10);
  return ['hsl(',hue,', 100%, 50%)'].join('');
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { value: 10 }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          minValue={0} maxValue={100}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>
      <code style={{ marginTop: 10 }}>fillColor=#1976D2</code>
      <ProgressBar value={this.state.value} fillColor={"#1976D2"} style={{marginBottom: 20}} />
      <code style={{ marginTop: 10 }}>fillColor=Fn</code>
      <ProgressBar value={this.state.value} fillColor={fillColor} />
    </div>
  }
}

export default () => <App />
Object|Fn(props): Object
default: undefined
Inline style added on fill part of <ProgressBar />.
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

function fillStyle({ value }) {
  const hue=((100 - value) * 1.2).toString(10);
  return { background: ['hsl(',hue,', 100%, 50%)'].join('') }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { value: 40 }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          minValue={0} maxValue={100}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>

      <code>fillStyle={'{background: rgb(145, 198, 251)}'}</code>
      <ProgressBar value={this.state.value} fillStyle={{background: 'rgb(145, 198, 251)'}} style={{marginBottom: 20}}/>

      <code>fillStyle=Fn</code>
      <ProgressBar value={this.state.value} fillStyle={fillStyle} />
    </div>
  }
}

export default () => <App />
Object|Fn(props): Object
default: undefined
Inline style applied on moving bar when <ProgressBar /> is in indeterminate state.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'

export default () => <div>
  <ProgressBar indeterminateBarStyle={{ background: 'fuchsia' }} indeterminate={true}/>
</div>
Object
default: undefined
Class name added on label.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'

export default () => <ProgressBar value={10} labelClassName="progressbar-background-red" />
Because of the lower specificity of classes in CSS, the properties added in the corresponding class are overwritten from the inner styling of the <ProgressBar />. Therefore you might have to use !important to make them effective.
String
default: undefined
Set color for label when it is inside fill part of the <ProgressBar />.
If labelFillColor it not set, it will default to remainingColor.
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { value: 40 }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          minValue={0} maxValue={100}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>

      <code>labelFillColor=orange</code>
      <ProgressBar labelPosition="start" value={this.state.value} labelFillColor="orange" />
    </div>
  }
}

export default () => <App />
String
default: undefined
Set color for label when it is inside remaining part of the <ProgressBar />.
If labelRemainingColor it not set, it will default to fillColor.
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { value: 40 }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          minValue={0} maxValue={100}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>

      <code>labelRemainingColor="orange"</code>
      <ProgressBar value={this.state.value} labelRemainingColor="orange" />
    </div>
  }
}

export default () => <App />
Object
default: undefined
Inline style applied on label.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'

export default () => <ProgressBar value={10} labelStyle={{ color: 'red' }} />
String|Fn(props): String
default: undefined
Set remaining background, it is overwritten by remainingStyle.
If labelFillColor it not set, it will default to remainingColor.
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

function remainingColor({ value }) {
  const hue=((100 - value) * 1.2).toString(10);
  return ['hsl(',hue,', 100%, 50%)'].join('');
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { value: 40 }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          minValue={0} maxValue={100}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>
      <code style={{ marginTop: 10 }}>remainingColor=rgb(145, 198, 251)</code>
      <ProgressBar value={this.state.value} remainingColor={"rgb(145, 198, 251)"} />
      <code style={{ marginTop: 10 }}>remainingColor=Fn</code>
      <ProgressBar value={this.state.value} remainingColor={remainingColor} />
    </div>
  }
}

export default () => <App />
Object|Fn(props): Object
default: undefined
Inline style added on remaining part of <ProgressBar />.
import React, { Component } from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

function remainingColor({ value }) {
  const hue=((100 - value) * 1.2).toString(10);
  return ['hsl(',hue,', 100%, 50%)'].join('');
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { value: 40 }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div>
          value
        </div>
        <NumericInput
          style={{ width: 70 }}
          minValue={0} maxValue={100}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />
      </div>

      <code style={{ marginTop: 10 }}>remainingStyle={'{ background: rgb(145, 198, 251) }'}</code>
      <ProgressBar value={this.state.value} remainingStyle={{ background: 'rgb(145, 198, 251)' }} />

      <code style={{ marginTop: 10 }}>remainingStyle=Fn</code>
      <ProgressBar value={this.state.value} remainingStyle={(value) => { background: remainingColor(value)} }/>
    </div>
  }
}

export default () => <App />
Object
default: undefined
Inline style applied on <ProgressBar /> body.
import React from 'react'
import ProgressBar from '@zippytech/react-toolkit/ProgressBar'
import '@zippytech/react-toolkit/ProgressBar/index.css'

export default () => <ProgressBar value={10} style={{ border: '2px solid #333' }} />