material-ui-number-input
TypeScript icon, indicating that this package has built-in type declarations

5.0.24 • Public • Published

material-ui-number-input

The better TextField for number inputs.

Install

NPM

Changelog

Check Change log for changes.

Properties

Name Type Default TextField Description
children node
className string The css class name of the root element.
disabled bool false Disables the input field if set to true.
floatingLabelFixed bool false If true, the floating label will float even when there is no value.
id string The id prop for the input field.
name string Name applied to the input.
fullWidth bool false If true, the field receives the property width 100%.
underlineShow bool true If true, shows the underline for the input field.
defaultValue number The number to use for the default value. Must be in range [min, max] if any is setted.
strategy 'ignore' | 'warn' | 'allow' 'allow' Strategy to use when user presses key and when value prop change it's value.
min number The number used as minimum value limit. Must be less than max.
max number The number used as maximum value limit. Must be greater than min.
required bool false If true and if input is left empty than instead of 'clean', 'required' error will be emited throughout onError handler if useStrategy is not 'ignore'.
value string The value of the input field.
onChange function Callback function that is fired when input filed must change it's value. Signature: function(event: React.FormEvent<HTMLInputElement>, value: string) => void.
onError function Callback function that is fired when input error status changes and strategy is not 'ignore'. Signature: function(error: 'none' | 'invalidSymbol' | 'incompleteNumber' | 'singleMinus' | 'singleFloatingPoint' | 'singleZero' | 'min' | 'max' | 'required' | 'clean') => void.
onValid function Callback function that is fired when input's value is a valid number. Signature: function(value: number) => void
onRequestValue* function Callback function that is fired when strategy is 'warn' or 'ignore', input is controlled and an invalid number value is passed. It provides valid number value which needs to be setted. Signature: function(value: string) => void
errorText node The error content to display.
errorStyle object The style object to use to override error styles.
floatingLabelFocusStyle object The style object to use to override floating label styles when focused.
floatingLabelStyle object The style object to use to override floating label styles.
floatingLabelText node The content to use for the floating label element.
hintStyle object Override the inline-styles of the TextField's hint text element.
hintText node The hint content to display.
inputStyle object Override the inline-styles of the TextField's input element. When multiLine is false: define the style of the input element. When multiLine is true: define the style of the container of the textarea.
style object Override the inline-styles of the root element.
underlineDisabledStyle object Override the inline-styles of the TextField's underline element when disabled.
underlineFocusStyle object Override the inline-styles of the TextField's underline element when focussed.
underlineStyle object Override the inline-styles of the TextField's underline element.

* onRequestValue is required when strategy is 'warn' or 'ignore' and input is controlled in order to ensure correct strategy behaviour.

Strategies

strategy onError fired onRequestValue fired
'allow'
'warn' ✓*
'ignore' ✓*

* Fired when input is controlled (value is provided). If input is not controlled it's value will be automaticlly corrected when it get's invalid number value.

Errors

'none'

Fired when input's value is valid (there is no error).

'required'

Fired when required prop is true and user leaves empty the input or it gets cleared.

'clean'

Fired when required prop is false and user leaves empty the input or it gets cleared.

'invalidSymbol'

Fired when user enters none special key which is different than -,.,[0-9].

'incompleteNumber'

Fired wehn user enters - as first char in the input or when user enters the first ..

'singleMinus'

Fired when user enters - not as a first char.

'singleFloatingPoint'

Fired when user enters . and there is already one entered.

'singleZero'

Fired when user has entered 0 as first char and enters a digit key.

'min'

Fired when user enters number less than min prop value.

'max'

Fired when user enters number greater than max prop value.

public methods

NumberInput re-exposes public method getInputNode(): HTMLInputElement from TextField.

TextField methods: blur, focus, select and getValue are not exposed as they and getInputNode will be removed in material-ui 0.16 and replaced with public member input which is public and now but getInputNode is prefered until 0.16 is released. If you want to use any of those methods call them on input retunrned from getInputNode with the excpetion of getValue instead use value property.

Example

import * as React from 'react';
import NumberInput from 'material-ui-number-input';
 
class Demo extends React.Component {
  constructor(props) {
  super(props);
  
  this.onKeyDown = (event) => {
    console.log(`onKeyDown ${event.key}`);
  };
  
  this.onChange = (event, value) => {
    const e = event;
    console.log(`onChange ${e.target.value}${value}`);
  };
  
  this.onError = (error) => {
    let errorText;
    console.log(error);
    switch (error) {
      case 'required':
        errorText = 'This field is required';
        break;
      case 'invalidSymbol':
        errorText = 'You are tring to enter none number symbol';
        break;
      case 'incompleteNumber':
        errorText = 'Number is incomplete';
        break;
      case 'singleMinus':
        errorText = 'Minus can be use only for negativity';
        break;
      case 'singleFloatingPoint':
        errorText = 'There is already a floating point';
        break;
      case 'singleZero':
        errorText = 'Floating point is expected';
        break;
      case 'min':
        errorText = 'You are tring to enter number less than -10';
        break;
      case 'max':
          errorText = 'You are tring to enter number greater than 12';
          break;
      }
      this.setState({ errorText: errorText });
    };
 
    this.onValid = (value) => {
      console.debug(`${value} is a valid number`);
    };
 
    this.onRequestValue = (value) => {
      console.log(`request ${JSON.stringify(value)}`);
      this.setState({ value: value })
    }
  }
    
  render() {
    const { state, onChange, onError, onKeyDown, onValid, onRequestValue } = this; 
    return (
      <NumberInput
        id="num"
        value={state.value}
        required
        defaultValue={9}
        min={-10}
        max={12}
        strategy="warn"
        errorText={state.errorText}
        onValid={onValid}
        onChange={onChange}
        onError={onError}
        onRequestValue={onRequestValue}
        onKeyDown={onKeyDown} />
    );
  }
}

Written in Typescript and Typescript Ready! (check example)

Supports propTypes for regular JavaScript users

Testing

Tests will be added soon

Contributing

  1. Fork the repository
  2. npm install
  3. npm run typings
  4. Make changes
  5. npm start
  6. open http://localhost:3000
  7. Make a Pull Request

Dependencies (3)

Dev Dependencies (19)

Package Sidebar

Install

npm i material-ui-number-input

Weekly Downloads

83

Version

5.0.24

License

MIT

Last publish

Collaborators

  • nohomey