borbit/react-mask-mixin

Input mask for text input http://borbit.github.io/react-mask-mixin/

react-mask-mixin

Input mask for text input.

Example

Install with npm

npm install react-mask-mixin

Usage

The goal I wanted to reach in the very beginning was to make basic <input/> element understand custom property mask which would define strict format for user input (for example date or phone number). Somewhat, I thought that LinkedStateMixin, from React.addons, made input elements understand valueLink property (that looks like custom at the first glance) and I naively believed that it was possible to write similar solution. After several minutes of digging into React source code it turned out that valueLink was a part of <input/> and <textarea/> implementation and LinkedStateMixin just utilized it. Now I wander if there is a case when valueLink can be used without LinkedStateMixin.

Solution:

1. Wrap <input/> with custom component
2. Add react-mask-mixin into mixins array
3. Spread this.mask.props over the <input/>

Mixin polutes your component scope with mask object where It keeps eveithing needed. mask.props consists of several event handlers and value prop that you should necessarily spread over the <input/> element in order to enable masking.

As a code it would look like this:

var React = require('react')
var ReactDOM = require('react-dom')
var ReactMaskMixin = require('react-mask-mixin')

var Input = React.createClass({
  mixins: [ReactMaskMixin],
  render() {
    return <input {...this.props} {...this.mask.props}/>
  }
})

var Component = React.createElement({
  render(): {
    return <Input mask="99/99/99"/>
  }
})

ReactDOM.render(<Component/>, document.body)

Masking definitions

• 9 - numeric
• A - alphabetical
• * - alphanumeric

Tests

react-mask-mixin is covered by Mocha tests. To run tests just open test/test.html in a browser.

License

react-mask-mixin may be freely distributed under the MIT license.

Copyright (c) 2015 Serge Borbit <[email protected]>

react-mask-mixin's Issues

_onBlur, caret position and element value

Element value cut by cursor position even if value is properly filled.
Check _onBlur function.
Fast fix:
this.mask.props.value = value.substr(0, cursor) -> this.mask.props.value = value.substr(0, value.length)

Fix caret position on android device

On android devices there is a bug with caret position with alphabetical mask in example

IE11 strange behaviour onClick

http://borbit.github.io/react-mask-mixin/
If you click first input(filled with numbers) at the middle of it and then click somewhere else on page - all data after carret will be deleted(see this screencast http://quick.as/JZ9zS95Wa)

PS:I know that IE11 is bad news, but it's still 25% of market share...

getDOMNode is deprecated

I've just installed the mixin in a new React project and I got this warning in the console (but it's still working) (MarkedInput is my <input> wrapper):

Warning: MaskedInput.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.

How to change the field value?

Traditional value changing through state doesn't seem to work.

In the following example, whenever save() is called the state.date gets empty successfully but the field UI keeps its value.

var React = require('react');
var MaskMixin = require('react-mask-mixin');

var MaskedInput = React.createClass({
  mixins: [MaskMixin],
  render() {
      return <input {...this.props} {...this.mask.props}/>
  }
});

var Form = React.createClass({
  save() {
    this.state.date = null;
    this.setState(this.state);
  },
  render() {
    return (<div>
      <MaskedInput className="form-control" id="date" mask="99/99/9999" placeholder="DD/MM/YYYY"
                   value={this.state.date} onChange={this.changeField}/>
      <input type="button" onClick={this.save}/>
    </div>);
  }
});