{"size": 2211, "ext": "js", "max_stars_repo_path": "src/__playground__/index.js", "max_stars_repo_name": "jedwards1211/react-on-screen", "max_stars_repo_stars_event_min_datetime": "2017-05-15T11:55:50.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-21T22:21:22.000Z", "max_issues_repo_path": "src/__playground__/index.js", "max_issues_repo_name": "jedwards1211/react-on-screen", "max_issues_repo_issues_event_min_datetime": "2017-09-26T19:42:24.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-17T20:58:07.000Z", "max_forks_repo_path": "src/__playground__/index.js", "max_forks_repo_name": "jedwards1211/react-on-screen", "max_forks_repo_forks_event_min_datetime": "2017-07-01T12:04:17.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-13T16:04:25.000Z"}
{"max_stars_count": 392, "max_issues_count": 73, "max_forks_count": 60, "avg_line_length": 20.2844036697, "max_line_length": 67, "alphanum_fraction": 0.5336951606}
import React from 'react';
import { render } from 'react-dom';

import TrackVisibility from '../index';
import './index.css';

const Settings = ({
  once,
  partialVisibility,
  offset,
  throttleInterval,
  handleCheckbox,
  handleInput
}) => (
  <ul className="settings">
    <li>
      <label htmlFor="once">Once</label>
      <input
        id="once"
        name="once"
        type="checkbox"
        onChange={handleCheckbox}
        value={once}
      />
    </li>
    <li>
      <label htmlFor="partialVisibility">Partial Visibility</label>
      <input
        id="partialVisibility"
        name="partialVisibility"
        type="checkbox"
        onChange={handleCheckbox}
        value={partialVisibility}
      />
    </li>
    <li>
      <label htmlFor="offset">Offset</label>
      <input
        id="offset"
        name="offset"
        type="number"
        onChange={handleInput}
        value={offset}
      />
    </li>
    <li>
      <label htmlFor="throttleInterval">Throttle Interval</label>
      <input
        id="throttleInterval"
        name="throttleInterval"
        type="number"
        onChange={handleInput}
        value={throttleInterval}
      />
    </li>
  </ul>
);

const Square = ({ isVisible }) => (
  <div className={`square ${isVisible ? 'is-visible' : ''}`} />
);

class App extends React.Component {
  state = {
    once: false,
    throttleInterval: 150,
    offset: 0,
    partialVisibility: false
  };

  handleCheckbox = e => {
    this.setState({
      [e.target.name]: !this.state[e.target.name]
    });
  };

  handleInput = e => {
    this.setState({
      [e.target.name]: Number(e.target.value)
    });
  };

  render() {
    const list = [];
    for (let i = 0; i < 5; i++) {
      list.push(
        <React.Fragment key={i}>
          <TrackVisibility {...this.state}>
            <Square />
          </TrackVisibility>
          <hr />
        </React.Fragment>
      );
    }
    return (
      <div>
        <Settings
          {...this.state}
          handleCheckbox={this.handleCheckbox}
          handleInput={this.handleInput}
        />
        <div>{list}</div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));
