React-mask-mixin NPM

react-mask-mixin

gif

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 into mixins 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)