react-input-mask

Yet another react component for input masking

View the Project on GitHub sanniassin/react-input-mask

Demos

Phones

<InputMask mask="+4\9 99 999 99" maskChar={null} />
<InputMask mask="+7 (999) 999-99-99" />

Dates

<InputMask mask="99-99-9999" defaultValue="01-01-2015" />
<InputMask mask="99/99/9999" placeholder="Enter birthdate" />

Credit card (autochange to Amex format if starts with 34 or 37)

state = {
  value: '',
  mask: '9999-9999-9999-9999'
}

onChange = (event) => {
  var value = event.target.value;
  var newState = {
    mask: '9999-9999-9999-9999',
    value: value
  };
  if (/^3[47]/.test(value)) {
    newState.mask = '9999-999999-99999';
  }
  this.setState(newState);
}

render() {
  return <InputMask {...this.state} onChange={this.onChange} />;
}