JSFiddle - React, Tailwind, and code Playground

by ashish shubham

HTML

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<div id="baseContainer">

</div>

CSS

.container {
  height: 300px;
  width: 80%;
  border: 1px solid black;
  position: relative;
}

.item {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  background-color: #d1d3d8;
  margin: 10px;
}

.make_grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}

Babel + JSX

function getContent(offset, num) {
  // Do not change this method.
  const content = [];
  for (i = 0; i < num; i++) {
    content.push(offset + i);
  };
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(content);
    }, Math.random() * 2000);
  })
}

class ParentComponent extends React.Component {

    constructor() {
      super()
      this.state = {
        images: [],
        offset: 0,
        numberOfItems: 20,
        requestInProcess: false
      }
    }

    componentDidMount() {
      getContent(this.state.offset, this.state.numberOfItems).then((images) => {
        let newOffset = this.state.offset + this.state.numberOfItems;
        this.setState({
          images,
          newOffset
        })
      })
    }

    renderItems = (images) => {
      return images.map(function(value, key) {
          return ( < div className = "item" > {
              value
            } < /div>)
          })
      }

      onScrollEnd = (event) => {
        if (event.target.scrollTop && !this.state.requestInProcess) {
          getContent(this.state.offset, this.state.numberOfItems).then((newImages) => {
            this.setState({
              newImages: this.state.images.concat(newImages)
            })
          })
        }
      }

      render() {
        //let images= this,
        return ( < div className = "container" >
          < div onScroll = {
            this.onScrollEnd
          }
          className = "make_grid" > {
            this.renderItems(this.state.images)
          } < /div> < /div > );
      }



    }

    ReactDOM.render( < ParentComponent / > , document.getElementById('baseContainer'));