Input mask for text input
npm install react-mask-mixin
`
Usage
The goal I wanted to reach in the very beginning was to make basic 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 and implementation and LinkedStateMixin just utilized it. Now I wander if there is a case when valueLink can be used without LinkedStateMixin.
$3
1. Wrap with custom component
2. Add react-mask-mixin into mixins array
3. Spread this.mask.props over the
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 element in order to enable masking.
As a code it would look like this:
`javascript
var React = require('react')
var ReactDOM = require('react-dom')
var ReactMaskMixin = require('react-mask-mixin')
var Input = React.createClass({
mixins: [ReactMaskMixin],
render() {
return
}
})
var Component = React.createElement({
render(): {
return
}
})
ReactDOM.render(
`
$3
- 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.