README
react-mask-mixin
Input mask for text input.
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:
- Wrap
<input/>
with custom component - Add
react-mask-mixin
intomixins
array - 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
- numericA
- 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 <serge.borbit@gmail.com>