How to use react-lazyload - 10 common examples

/**
 * Created by axetroy on 17-4-6.
 */
import React, { Component } from "react";
import { connect } from "redux-zero/react";
import { Row, Col, Spin, Pagination } from "antd";
import { lazyload } from "react-lazyload";

import github from "../../lib/github";
import graphql from "../../lib/graphql";

import CONFIG from "../../config.json";
import actions from "../../redux/actions";

@lazyload({
  height: 200,
  offset: 100,
  once: true
})
class GithubFollowing extends Component {
  state = {
    meta: {
      page: 1,
      per_page: 30
    }
  };

  async componentWillMount() {
    // await this.getFollowings(this.state.meta.page, this.state.meta.per_page);

    const response = await graphql(

/**
 * Created by axetroy on 17-4-6.
 */
import React, { Component } from "react";
import { connect } from "redux-zero/react";
import { Row, Col, Spin, Pagination } from "antd";
import { lazyload } from "react-lazyload";

import github from "../../lib/github";
import graphql from "../../lib/graphql";
import CONFIG from "../../config.json";
import actions from "../../redux/actions";

@lazyload({
  height: 200,
  offset: 100,
  once: true
})
class GithubFollowers extends Component {
  state = {
    meta: {
      page: 1,
      per_page: 30
    }
  };

  async componentWillMount() {
    // await this.getFollowers(this.state.meta.page, this.state.meta.per_page);

    const response = await graphql(

const fuse = new Fuse(items[platform], {
        shouldSort: true,
        threshold: 0.6,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: [
          'name',
        ],
      });
      items[platform] = fuse.search(searchTerm);
    });
    this.setState({ items });

    forceCheck(); // Recheck lazyload
  }

}
  }
  return result;
}

function sum(array) {
  let result = 0;
  for (let key in array) {
    if (array.hasOwnProperty(key)) {
      result = result + (array[key] || 0);
    }
  }
  return result;
}

@lazyload({
  height: 200,
  offset: 100,
  once: true
})
class GithubLang extends Component {
  state = { ALL_REPOS: null };

  componentWillMount() {
    import("@axetroy/react-chart.js").then(module => {
      this.setState({ ReactChart: module.default });
    });
  }

  componentWillReceiveProps(nextPros) {
    if (nextPros.ALL_REPOS && this.state.ALL_REPOS !== this.props.ALL_REPOS) {
      this.setState({ ALL_REPOS: nextPros.ALL_REPOS });

export default function lazyDecorator({ title,
    height = 300,
    offset = 150,
    placeholder = ,
    debounce = 250,
    once = true }) {
    return lazyload({ height, debounce, once, offset, placeholder });
}

/**
 * Created by axetroy on 17-4-6.
 */
import React, { Component } from "react";
import { connect } from "redux-zero/react";
import { Row, Col, Spin, Tooltip, Tag } from "antd";
import sortBy from "lodash.sortby";
import Octicon from "react-octicon";
import moment from "moment";
import { lazyload } from "react-lazyload";

import graphql from "../../lib/graphql";
import actions from "../../redux/actions";

@lazyload({
  height: 200,
  offset: 100,
  once: true
})
class GithubRepositories extends Component {
  state = {};
  async componentWillMount() {
    import("@axetroy/react-chart.js").then(module => {
      this.setState({ ReactChart: module.default });
    });
    this.getContributeRepos().then(res => {
      this.setState({ contributedRepositories: res });
    });
    this.getStarredRepos().then(res => {
      let language = {};
      res.nodes.forEach(node => {

}
  }
  return result;
}

function sum(array) {
  let result = 0;
  for (let key in array) {
    if (array.hasOwnProperty(key)) {
      result = result + (array[key] || 0);
    }
  }
  return result;
}

@lazyload({
  height: 200,
  offset: 100,
  once: true
})
class GithubLangIngredient extends Component {
  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    let { languages } = this.props;

    languages = languages || {};

    if (Object.keys(languages).length === 0) languages = { Unkown: 1 };

const styles = {
  contributionBar: {
    borderRadius: "0.5rem",
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%"
  },
  orgRow: {
    padding: "0 0 2rem 0",
    borderBottom: "0.1rem solid #e6e6e6"
  }
};

@lazyload({
  height: 200,
  offset: 100,
  once: true
})
class GithubOrganizations extends Component {
  state = {
    currentOrg: null,
    orgMemberShip: {}
  };

  async getOrganizations(
    organizations = {
      totalCount: 0,
      nodes: []
    },
    endCursor

import graphql from "../../lib/graphql";
import actions from "../../redux/actions";

const styles = {
  infoBlock: {
    width: "80%",
    margin: "1rem auto",
    textAlign: "center",
    color: "#fff",
    padding: "2rem"
  },
  strong: { fontSize: "2em" }
};

@lazyload({
  height: 200,
  offset: 100,
  once: true
})
class GithubUserInfo extends Component {
  async componentWillMount() {
    try {
      const response = await graphql(
        `
          query {
            viewer {
              name
              login
              bio
              avatarUrl
              url

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { View } from 'react-desktop/macOs'
import { lazyload } from 'react-lazyload'
import Image from 'legit-image'

import fileURL from 'file-url'
import cx from 'classnames'

import style from './_pictureItem'

@observer
@lazyload({
  height: '100%',
  once: true,
  scroll: true
})
class PictureItem extends Component {
  constructor (props) {
    super(props)
    this.store = props.store
  }

  render () {
    const { idx, location, active } = this.props
    const viewClass = cx(style.pictureItem, {
      [`${style.activeItem}`]: active
    })