Dropwire, like Mission Impossible, but for html attributed that download src for turnkey loading-as-needed (in React)!

LICENSE AGPL-3 No redistribution but for strategy of parts, unless retributed

how to use

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      scrollTop: 0
    };
    for (let i = 0; i < 220; i++) {
      this["scrollImg" + i] = React.createRef();
    }
  }
  componentDidMount = () => {
    window.addEventListener("scroll", this.handleScroll);
  };
  componentWillUnmount = () => {
    window.removeEventListener("scroll", this.handleScroll);
  };
  handleScroll = (e) => {
    if (!this.state.offScroll) {
      const scrollTop = window.scrollY;
      this.setState(
        {
          scrolling: true,
          scrollTop
        },
        () => {
          clearTimeout(this.scrollTimeout);
          this.scrollTimeout = setTimeout(() => {
            this.setState({
              scrolling: false
            });
          }, 900);
        }
      );
    }
  };
  render() {
    const handleScollImgError = (e) => {
      if (e.message) {
        console.log(e.message);
        this.setState({ serviceCancelingImages: true });
      }
    };
    let arrayOfnumbers = [0];
    const scrollnum = () => {
      const num = arrayOfnumbers[arrayOfnumbers.length - 1] + 1;
      arrayOfnumbers.push(num);
      return num;
    };
    const selectMemberType = (e) => {
      //console.log(e.target.id);currentTarget.parentNode
      this.setState({ viewMemberType: e.currentTarget.id });
    };
    const styleIconMember = (e) => {
      return {
        borderRadius: "15px",
        border: `${
          (!this.state.viewMemberType && e === "author") ||
          e === this.state.viewMemberType
            ? 1
            : 0
        }px solid white`,
        width: "30px",
        height: "30px",
        position: "relative",
        margin: "4px"
      };
    };
    return (
      <div>
        <div
          onClick={() => {
            window.scroll(0, 1);
            this.setState({ trigger: true });
          }}
          style={{
            display: this.state.trigger ? "none" : "block",
            position: "absolute",
            height: "101%",
            width: "100%",
            backgroundColor: "rgba(20,20,20,.5)"
          }}
        />
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div>
            <span id="author" onClick={selectMemberType}>
              <Cable
                style={{ ...styleIconMember("author") }}
                onError={handleScollImgError}
                img={true}
                src={
                  this.state.noyoutube
                    ? ""
                    : "https://www.dropbox.com/s/mi3ksr5dde174qa/author%20icon.png?raw=1"
                }
                float="left"
                title="author"
                scrolling={this.state.scrolling}
                fwd={this["scrollImg" + scrollnum()]}
                scrollTopAndHeight={this.state.scrollTop + window.innerHeight}
                scrollTop={!this.state.oldecon ? 0 : this.state.scrollTop}
              />
            </span>
            <span id="admin" onClick={selectMemberType}>
              <Cable
                style={{ ...styleIconMember("admin") }}
                onError={handleScollImgError}
                img={true}
                src={
                  this.state.noyoutube
                    ? ""
                    : "https://www.dropbox.com/s/pjelt1l07rvfwl4/admin%20icon.png?raw=1"
                }
                float="left"
                title="admin"
                scrolling={this.state.scrolling}
                fwd={this["scrollImg" + scrollnum()]}
                scrollTopAndHeight={this.state.scrollTop + window.innerHeight}
                scrollTop={!this.state.oldecon ? 0 : this.state.scrollTop}
              />
            </span>
            <span id="employee" onClick={selectMemberType}>
              <Cable
                style={{ ...styleIconMember("employee") }}
                onError={handleScollImgError}
                img={true}
                src={
                  this.state.noyoutube
                    ? ""
                    : "https://www.dropbox.com/s/lcjzwa1opxczkrw/employee%20icon.png?raw=1"
                }
                float="left"
                title="employee"
                scrolling={this.state.scrolling}
                fwd={this["scrollImg" + scrollnum()]}
                scrollTopAndHeight={this.state.scrollTop + window.innerHeight}
                scrollTop={!this.state.oldecon ? 0 : this.state.scrollTop}
              />
            </span>
          </div>
          {this.state.viewMemberType || "author"}
          <br />
          {this.state.viewMemberType === "admin"
            ? this.state.admin.length < 1
              ? "-"
              : //this.props.company.admin.map((e) => {
                //return <div>{this.state.admin[e].map((e) => {})}</div>;<div>{
                this.state.admin.map((e) => {
                  return <div>{e.username}</div>;
                }) //}</div>})
            : this.state.viewMemberType === "employee"
            ? this.state.employees.length < 1
              ? "-"
              : this.state.employees.map((e) => {
                  return <div>{e.username}</div>;
                })
            : this.state.author.username}
          {/*jammin in the name of the lord err where til thru anyhow */}
        </div>
        <Cable
          style={{
            height: "900px",
            width: "100%"
          }}
          onError={handleScollImgError}
          src={
            this.state.serviceCancelingImages
              ? ""
              : `https://fred.stlouisfed.org/graph/graph-landing.php?g=KalW&width=670&height=700`
          }
          timeout={1500}
          girth={1000}
          float="right"
          title="https://fred.stlouisfed.org/graph/?g=KalW"
          scrolling={this.state.scrolling}
          fwd={this["scrollImg" + scrollnum()]}
          scrollTopAndHeight={this.state.scrollTop + window.innerHeight}
          scrollTop={this.state.scrollTop}
        />
      </div>
    )
  }
}

SEE LICENSE IN LICENSE.lz.txt

(please help with bundler for classes, not using a bundler (peerDeps required, spa)) copying the src code? https://github.com/npm/cli/issues/3514 npm install --force && npm uninstall @babel/polyfill --save ...