@instructure/quiz-number-input NPM

category: packages

An internationalized, controlled number input:

---
example: true
render: false
---
class Example extends React.Component {
  state = {
    number: 0.1
  };

  handleChange = (event, number) => this.setState({ number });

  render () {
    return (
      <div>
        <NumberInput
          {...this.props}
          value={this.state.number}
          onChange={this.handleChange}
        />
        <br />
        <Button onClick={() => this.handleChange({}, '5')}>
          Go with 5
        </Button>
      </div>
    )
  }
}

render(<Example label="Battery capacity in Amp-hrs" step={0.1} min={0.1} />)

With precision:

---
example: true
render: false
---
class Example extends React.Component {
  state = {
    number: 9.99,
    precisionType: 'decimalPrecision',
    precisionValue: 2,
    precision: 2
  }

  handleNumberChange = (event, number) => this.setState({ number })

  handlePrecisionChange = (event, precisionValue, precision) => {
    this.setState({
      precisionValue,
      precision: precision ? Number(precision) : null
    })
  }

  render () {
    return (
      <div>
        <Select label="Precision type" onChange={(e, o) => this.setState({ precisionType: o.value })}>
          <option value="decimalPrecision">Decimal</option>
          <option value="significantDigits">Significant digits</option>
        </Select>
        <br />
        <NumberInput
          label={this.state.precisionType}
          min={0}
          max={10}
          decimalPrecision={0}
          value={this.state.precisionValue}
          onChange={this.handlePrecisionChange}
        />
        <br />
        <NumberInput
          label="Value"
          decimalPrecision={this.state.precisionType === 'decimalPrecision' ?  this.state.precision : null}
          significantDigits={this.state.precisionType === 'significantDigits' ?  this.state.precision : null}
          value={this.state.number}
          onChange={this.handleNumberChange}
        />
      </div>
    )
  }
}

render(<Example />)

The number input accepts and displays values according to the specified locale, which can be supplied either as a property or with ApplyLocale. If a locale is not specified, it will be inferred from the browser.

If the min, max, or step props are given as strings, they will be parsed according to the rules of the en-US locale (with . decimal separator). This is for backward-compatibility only; it is recommended to pass numbers, not strings, for these props.

The onChange prop receives the content of the input as a second argument, and a normalized string parsed according to the current locale as the third argument. For example, if the locale is fr and the input value is set to 1,5, the third argument to onChange will be "1.5". Note that this third argument will be null if the input string cannot be parsed.

If the value prop is a number, it will be formatted according to the locale on render; if a string is given, make sure it is already in the correct format for the locale.