gRbgxK

grbgxk.markdown

gRbgxK

A Pen by Benjamin Reid on CodePen.

License.

index.html

<div id="app"></div>

script.babel

const FormattedInput = class extends React.Component {
  constructor(props) {
    super(props);
    
    this.amountChanged = this.amountChanged.bind(this);
    
    this.state = {
      value: 0,
    };
  }
  
  amountChanged(e) {
    this.setState({
      value: e.target.value,
    });
  }
  
  formatValue(value) {
    return accounting.formatMoney(parseFloat(value) / 100);
  }
  
  render() {
    return (
      <div>
        <label for="formatted">Formatted input</label>
        <input
          id="formatted"
          type="text"
          value={this.formatValue(this.state.value)}
        />
        <label for="amount">Actual user input (type in here)</label>
        <input
          id="amount"
          type="text"
          onChange={this.amountChanged}
          value={this.state.value}
        />
      </div>
    );
  }
}

const App = () =>
  <div>
    <FormattedInput/>
  </div>
;

ReactDOM.render(
  <App/>,
  document.querySelector('#app')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>

style.scss

body {
  margin: 20px;
}

label {
  display: block;
  margin-bottom: 10px;
}

input {
  margin-bottom: 25px;
}