{"size": 1146, "ext": "js", "max_stars_repo_path": "demo/Example.js", "max_stars_repo_name": "Zeitgold/react-number-format-input", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "demo/Example.js", "max_issues_repo_name": "Zeitgold/react-number-format-input", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "demo/Example.js", "max_forks_repo_name": "Zeitgold/react-number-format-input", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.8333333333, "max_line_length": 86, "alphanum_fraction": 0.6797556719}
import NumberFormatInput from '../src';
import React, {Component, PropTypes} from 'react';

const simpleFormat = new Intl.NumberFormat('en-US');

function format(allowNull, value) {
  return value === null ? 'null' : simpleFormat.format(value);
}

export default class Example extends Component {
  render() {
    const {description, numberFormat, allowNull, defaultValue = 1234.56} = this.props;
    const {value} = this.state || (this.state = {value: defaultValue});
    const onChange = (nextValue) => this.setState({value: nextValue});
    const placeholder = 'Empty is null';
    return (
        <div className="example">
          <p>{description}</p>
          <NumberFormatInput {...{placeholder, value, numberFormat, onChange}}/>
          value: <span className="value">{format(allowNull, value)}</span>
        </div>
    );
  }
}

Example.propTypes = {
  description: PropTypes.string.isRequired,
  numberFormat: PropTypes.shape({
    format: PropTypes.func.isRequired,
    resolvedOptions: PropTypes.func.isRequired,
  }).isRequired,
  defaultValue: PropTypes.number,
  allowNull: PropTypes.any,
  placeholder: PropTypes.string,
};
