MaskedTextField with material-ui

MaskedTextField.jsx

/** @jsx React.DOM */

var React = require('react')
  , mui = require('material-ui')
  , { TextField } = mui
  , $ = require('jquery');

require('jquery.inputmask');

var MaskedTextField = React.createClass({

  getInitialState() {
    return {
      value: '1234567890'
    }
  },

  propTypes: {
    mask: React.PropTypes.string,
    errorText: React.PropTypes.string,
    floatingLabelText: React.PropTypes.string,
    hintText: React.PropTypes.string,
    id: React.PropTypes.string,
    multiLine: React.PropTypes.bool,
    onBlur: React.PropTypes.func,
    onChange: React.PropTypes.func,
    onFocus: React.PropTypes.func,
    type: React.PropTypes.string
  },

  render() {
    // don't render anything, this is where we open the portal
    return <div/>;
  },

  componentDidMount: function() {
    var node = this.getDOMNode();

    var textField = (
      <TextField
        floatingLabelText={this.props.floatingLabelText}
        id={this.props.id}
        value={this.state.value}
        multiLine={this.props.multiLine}
        onBlur={this.props.onBlur}
        onChange={this.props.onChange}
        onFocus={this.props.onFocus}
        type={this.props.type} />
    );

    // start a new React render tree with our node and the children
    // passed in from above, this is the other side of the portal.
    var portal = React.render(textField, node);

    var $input = $(portal._getInputNode());

    $input.inputmask({
      mask: this.props.mask,
      showMaskOnHover: false,
      isComplete: function(buffer, opts) {
        var val = buffer.join('').replace(/\D/g, '');
        this.setState({ value: val });
      }.bind(this)
    });
  },

  componentWillUnmount: function() {
    var node = this.getDOMNode();
    React.unmountComponentAtNode(node);
  }

});

module.exports = MaskedTextField;

Updated with classes, react-dom and vanilla-masker (remove jquery \o/):

  import { PropTypes, Component } from 'react';
  import ReactDOM from 'react-dom';
  import VMasker from 'vanilla-masker';
  import { TextField } from 'material-ui';

  export default class MaskedTextField extends Component {

    static propTypes = {
      mask: PropTypes.string
    }

    render() {
      // don't render anything, this is where we open the portal
      return <div/>;
    }

    componentDidMount() {
      let node = ReactDOM.findDOMNode(this);
      let { mask, ...other } = this.props;

      let textField = (
        <TextField {...other} />
      );

      // start a new React render tree with our node and the children
      // passed in from above, this is the other side of the portal.
      let portal = ReactDOM.render(textField, node);

      let input = portal._getInputNode();

      VMasker(input).maskPattern(mask);
    }

    componentWillUnmount() {
      let node = ReactDOM.findDOMNode(this);
      ReactDOM.unmountComponentAtNode(node);
    }

  }

Add this to your components:

    onFieldChange(field, mask, event) {
      let value = event.target.value;

      this.setState({
        [field]: VMasker.toPattern(value, mask)
      });
    }

Then render (in example 'number' is the state we want to change):

          <MaskedTextField
            style={styles.input}
            floatingLabelText="Número do cartão"
            onChange={this.onFieldChange.bind(this, 'number', this.mask.cardNumber)}
            mask={this.mask.cardNumber}
            defaultValue={this.state.number}
          />

A found a final implementation without react-hooks.
https://medium.com/@lawrentiy/react-material-ui-vmasker-24d0940e3930#.kynhh6cda