React Number Variants

Number, Currency, and Percent

Number

Max 3 decimal places, Min 1 decimal place; Default starting value

Code:


<Number
  inputClassName="form-control"    
  minNumberOfDecimals={1}
  maxNumberOfDecimals={3}
  value={7.2}
  onEvent={(event, value) => 
    this.setState({ event, value })
  }
/>

OnEvent

Event:

Value:

Number

Min and Max values; Max 1 decimal place

Code:


<Number
  inputClassName="form-control"
  maxNumberOfDecimals={1}
  min={1}
  max={42}
  onEvent={(event, value) => 
    this.setState({ event, value })
  }
  placeholder="placeholder"
/>

OnEvent

Event:

Value:

Number

German format; Always 2 decimal places

Code:


<Number
  inputClassName="form-control"    
  minNumberOfDecimals={2}
  maxNumberOfDecimals={2}
  locale="de-DE"
  onEvent={(event, value) => 
    this.setState({ event, value })
  }
/>

Note: decimals and commas switched from English when unfocused (German format), but focused value must always be English format

OnEvent

Event:

Value:

Currency

English, USD; Always 1 decimal; Only emit on-blur

Code:


<Number
  inputClassName="form-control"
  type="currency" 
  minNumberOfDecimals={1}
  maxNumberOfDecimals={1}
  value={1000}
  locale="en-US"
  currency="USD"
  emitOnChange={false}
  onEvent={(event, value) => 
    this.setState({ event, value })
  }
/>

OnEvent

Event:

Value:

Currency

Chinese, CNY, No decimals

Code:


<Number
  inputClassName="form-control"
  type="currency" 
  maxNumberOfDecimals={0}
  value={1000}
  locale="zh-CN"
  currency="CNY"
  onEvent={(event, value) => 
    this.setState({ event, value })
  }
/>

OnEvent

Event:

Value:

Currency

English, JPY (Japanese currency); No decimals; Error message if less than 100

Code:


<Number
  inputClassName="form-control"
  type="currency" 
  maxNumberOfDecimals={0}
  value={1000}
  locale="en-US"
  currency="JPY"
  showError={eventState.showError}
  errorClassName="error-message"
  errorLocation="bottom"
  errorMessage="Must be at least 100 Yen"
  onEvent={(event, value) => 
    this.setState({
      event,
      value,
      showError: value < 100
    })
  }
/>

OnEvent

Event:

Value:

Percent

No decimals, no emit on blur

Code:


<Number
  inputClassName="form-control"
  type="percent"
  maxNumberOfDecimals={0}
  emitOnBlur={false}
  onEvent={(event, value) => 
    this.setState({ event, value })
  }
/>

OnEvent

Event:

Value:

Percent

Only 2 decimals; Max value; No emit on-change; Error message on top if multiple of 5

Code:


<Number
  inputClassName="form-control"
  type="percent"
  minNumberOfDecimals={2}
  maxNumberOfDecimals={2}
  max={42}
  emitOnChange={false}
  showError={eventState.showError}
  errorClassName="error-message"
  errorLocation="top"
  errorMessage="Can't be a multiple of 5"
  onEvent={(event, value) => 
    this.setState({
      event,
      value,
      showError: value % 5 === 0
    })
  }
/>

OnEvent

Event:

Value:

Disabled

Disabled, 2 decimals

Code:


<Number
  inputClassName="form-control"
  type="percent"
  disabled={true}
  minNumberOfDecimals={2}
  value={42}
/>