Creating Beautiful Virtualized Lists with Material-UI and React Virtuoso

#react #material #javascript

If you did not get the news, Material-UI v4 is out. Awesome announcement indeed; the Material Design system is amazing. And a mature, popular, open-source react library that implements the material design specs? We live in great times.

My goal with the React Virtuoso library is to provide "chromeless" engine components which complement and power-up exiting UI libraries with advanced virtualization behavior. Version 0.6 allows you to replace the component structure with components of your choice. Today, we will use the Material-UI list components as containers in React Virtuoso to build a Material-looking virtualized list.

The final result looks like this:

Ready? Go!

Step 1: Hello World

A relatively modest step - we power up a new Stackblitz react project, and add the starter Virtuoso example - a list with 500 Item {index} items. the Virutoso component configuration is easy; you pass some dimensions (you can pass anything, including %, rem, etc), the total of items to render, and the item render prop. The component figures out the rest for you.

Step 2: Add material UI

Let's make that list stylish! By default, Virtuoso renders its list container as a div, and each individual item in a div wrapper. We swap those for their Material-UI counterparts by specifying the ListContainer and ItemContainer properties. They render ul and li under the hood - works for us!

Step 3: Add real (fake) data

Displaying Item 40 is quite boring, and, most likely, not what you need in your project. Let's show real data. Or at least, something that looks more convincing. In the next step, we generate a set of 500 user records using the awesome faker library and display them in the list. We also make the list structure more complex by adding an avatar to each item. To keep up with the trends, we separate the data from the presentation by putting the user record generation in a reusable hook.

Final step - endless scrolling

This is the most interesting part of the exercise. Loading 500 records in a single step is not a good idea. Instead, we start the list with 50 records, and add more when the user scrolls down. The hook we did in the previous step comes in handy; we extend it further to expose a loadMore method which simulates a roundtrip to the server and appends more records to the existing array. The loadMore call is wired up to Virtuoso's endReached callback property.

We also introduce two other minor enhancements: a footer which displays loading... in case the user scrolls too fast, and an overscan property which controls the eagerness of the load more behavior.

And, we are done! Was it shorter and simpler than expected? Are you looking for more? If so, go and check the advanced example in the docs - In addition to the above, it shows grouping with sticky items, optimizing the scrolling experience by hiding the avatars during scrolling.