To Infinity and Beyond with React Waypoint
Infinite Scroll with React Waypoint
Using AJAX to load more content as the user scrolls down, also known as “lazy load”, “autopager”, “endless pages”, etc. is the technique used to achieve infinite scrolling. Plenty of plugins and libraries exist to provide lazy loading in JavaScript, but what about a solution that meshes well with React.js? React Waypoint comes to the rescue!
React Waypoint Infinite Scroll Tutorial
Here are the three steps for implementing Lazy Load with React Waypoint in your very own React component:
- Install React Waypoint using your preferred JS package manager.
2. Include the React Waypoint component at the end of your list of items.
Note that we only render React Waypoint when not loading. The callback will request more items, and we don’t want to keep requesting more until the first request for items has loaded.
React Waypoint will also call it’s onEnter callback on the initial mount if it detects that it is within the viewport. That means that if the first page of items loaded doesn’t fill the screen, React Waypoint can request the next page.
3. Point the onEnter prop at the function that loads more data into your list. Make sure that the loading triggers a re-render of your list component.
Want the load to trigger before the user hits the end? Just use the threshold prop. In the above example, we set the threshold to 0.5, which means that the waypoint onEnter will trigger when the waypoint is as far away from entering the screen as twice the height of its scrollable parent’s viewport height.
Also note that if the scrollable area is not the whole window, then the scrollable ancestor element must be a positioned element. This allows React Waypoint to determine its own relative position. The easiest way to do this is to add the style position: relative on the scrollable parent:
That’s it! Three simple steps, and you’ve added lazy loading to your component.
You can see the full source code and working example in the React Waypoint documentation.
How It Works With React
React Waypoint is a React component, meaning you can easily compose it with other React components. In order to handle scroll events, React Waypoint binds event listeners to scroll and resize events, bypassing the usual React approach of passing callbacks as properties to a component to handle events. However, by using componentDidMount and componentWillUnmount lifecycle events, we can ensure that those event listeners are only set when the DOM is ready and are cleaned up when React Waypoint is removed from the page.
This Is Only The Beginning
Infinite scroll is just one of many ways that React Waypoint can be used. It could also be used to simplify building a scroll-spy feature, similar to the Twitter Bootstrap “scrollSpy”. Lastly, being able to easily track which page elements are within the viewport opens up interesting possibilities for analytics and data. For example, in a long list of messages, you could track the number of times a user scrolls down to look at a particular message, and track which messages are actually seen in the viewport as opposed to the messages that the user never scrolls down to see. The ability to track real user views rather than just page views or clicks adds more ways to understand user behavior.
The flexibility of this component is what inspired us at Brigade to release it as open source. I look forward to seeing what other examples show up for how to use React Waypoint.
