Friday 2 June 2017

infinite scroll in React + Meteor

I'm using Meteor with React. I cannot implement infinite scrolling. I have tried different npm and Meteor packages and it's still not working. "createContainer" subscribes to the whole dataset of "links", which is then rendered in the app. How can subscribe to just 9 entries and load more whenever a user is at the end of the page? I have spent the whole day on it, please help me!

class DealsList extends Component {


    renderList() {
        return this.props.links.map(link => {
        const url = `/travels/${link._id}`;

        return (
            <div className="col-md-4" key={link._id}>
            <Link  to={url} id={link._id}>
                <div className="thumbnail">

                <div className="imageProp">
                    <div className="caption readMore">SHOW DEAL <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
                    <img src={link.image} alt="Just another travel deal" />
                </div>

                <div className="caption">
                    <h4>{link.title}</h4>
                    {/*<p className="card-description"><strong>Bootstrap Thumbnail</strong> Customization Example. Here are customized <strong>bootstrap cards</strong>. We just apply some box shadow and remove border radius.</p>
                    <p><a href="#" className="btn btn-primary" role="button">Button</a></p>*/}
                </div>

                </div>
            </Link>
            </div>

        );
        });
    }


    render() {

        return (
          <div> 
          <FirstCarousel />
          <div className="container-fluid containerPadding cards-row">
              <div className="row">

              <div className="col-lg-12">
                  <div className="row grid">
                      {this.renderList()}
                  </div>
              </div>

              </div>

          </div>
          </div>
        );
    }
}



export default createContainer(() => {

Meteor.subscribe('links');

return { links: Links.find({}).fetch() };
}, DealsList);



via Lukas Navickas

No comments:

Post a Comment