tweening_number.jsx

var TweeningNumber = React.createClass({
  mixins: [tweenState.Mixin],
  getInitialProps: function() {
    return {
      value: 0,
      duration: 500
    };
  },
  getInitialState: function() {
    return { value: 0 };
  },
  componentWillReceiveProps: function(nextProps) {
    if(nextProps.value && nextProps.value !== this.state.value) {
      this.tweenState('value', {
        easing: tweenState.easingTypes.easeInOutQuad,
        duration: this.props.duration,
        delay: 0,
        endValue: nextProps.value
      });
    }
  },
  render: function() {
    var value = this.getTweeningValue('value').toFixed(2);

    var digits = value.toString().split('').map(function(digit, index) {
      var klass = (digit === '.') ? 'dot': 'digit';
      return <span key={index} className={klass}>{digit}</span>;
    }, this);

    return (
      <span className="tweening-number">{digits}</span>
    );
  }
});

tweening_number.scss

.tweening-number {
  .digit {
    display: inline-block;
    width: .6em;
  }

  .dot {
    display: inline-block;
    width: .2em;
  }
}

usage.jsx

var usage = (
  <TweeningNumber value={this.state.amount} />
);