{"size": 1648, "ext": "js", "max_stars_repo_path": "demo/src/App.js", "max_stars_repo_name": "yagrawl/nmbrs", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "demo/src/App.js", "max_issues_repo_name": "yagrawl/nmbrs", "max_issues_repo_issues_event_min_datetime": "2021-03-09T14:22:00.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T16:18:59.000Z", "max_forks_repo_path": "demo/src/App.js", "max_forks_repo_name": "yagrawl/nmbrs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 23.5428571429, "max_line_length": 83, "alphanum_fraction": 0.5370145631}
import React, { Component } from 'react';
import nmbrs from 'nmbrs';
import Twitter from './twitter';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      input: ''
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
  }

  handleFocus(e) {
    e.target.select();
  }

  handleChange(e) {
    let value = e.target.value;

    this.setState(
      prevState => ({
        ...prevState,
        input: value
      })
    );
  }

  demoNmbrs() {
    let nmbrsValue = nmbrs(this.state.input);

    return(
      <p className="number">{nmbrsValue}</p>
    );
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p className="title"><span className="main-title">NMBRS</span> | demo</p>
          <p className="details">
            An <a className="hover nodec"
                  href="https://www.npmjs.com/package/nmbrs"
                  target="_blank"
                  rel="noopener noreferrer"> npm module </a>
            &nbsp;to prettify numbers.
          </p>
          <input
            className={"input-box input-box-option"}
            name={"input"}
            type={"number"}
            value={this.state.input}
            onChange={this.handleChange}
            onFocus={this.handleFocus}
            placeholder={"Enter a Number"} />
          {this.demoNmbrs()}
          <Twitter title="NMBRS - An npm module to prettify large numbers."
                   url="https://github.com/yagrawl/nmbrs" />
        </header>
      </div>
    );
  }
}

export default App;
