Top React Libraries — Virtual Scrolling, Carousels, and Icons

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

react-virtualized

The react-virtualized package lets us display a virtualized list.

To install it, we run:

npm i react-virtualized

Then we can use it by writing:

import React from "react";
import { List } from "react-virtualized";

const list = Array(1000)
  .fill()
  .map((_, i) => i);

function rowRenderer({ key, index, isScrolling, isVisible, style }) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <List
        width={300}
        height={300}
        rowCount={list.length}
        rowHeight={20}
        rowRenderer={rowRenderer}
      />
    </div>
  );
}

We have the rowRenderer to display the list items.

It takes the following props.

key is the unique key in the array of rows.

index is the index of the row in the collection.

isScrolling is the list that’s currently being scrolled.

isVisible indicates whether the row is visible or not.

sytle is style object to be applied to position the row.

We can also use it to display a grid.

For example, we can write:

import React from "react";
import { Grid } from "react-virtualized";
import * as _ from "lodash";

const list = _.chunk(
  Array(1000)
    .fill()
    .map((_, i) => i),
  3
);

function cellRenderer({ columnIndex, key, rowIndex, style }) {
  return (
    <div key={key} style={style}>
      {list[rowIndex][columnIndex]}
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Grid
        cellRenderer={cellRenderer}
        columnCount={list[0].length}
        columnWidth={100}
        height={300}
        rowCount={list.length}
        rowHeight={30}
        width={300}
      />
    </div>
  );
}

We created a nested array with 3 items in each entry with the Lodash chunk method.

Then we created the cellRenderer to render the cells.

columnIndex has the index of the column.

key has the unique key of the entry.

rowIndex has the row index of the entry.

style has the styles to position the item.

Then in App , we use the Grid component that uses the cellRenderer and pass in the row and column counts.

The heights and width are also set.

This package also comes with components for tables and masonry grid.

react-icons

The react-icons package lets us add icons to our React app.

To install it, we can run:

npm i react-icons

Then we can import the icon and use it:

import React from "react";
import { FaBeer } from "react-icons/fa";

export default function App() {
  return (
    <div className="App">
      <h1>
        time for a <FaBeer />
      </h1>
    </div>
  );
}

It comes with icons for many libraries, including Bootstrap, Font Awesome, Github, and much more.

react-slick

The react-slick package lets us add a carousel to our React app.

To install it, we can run:

npm i react-slick slick-carousel

Then we can use it by writing:

import React from "react";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1
};

export default function App() {
  return (
    <div className="App">
      <Slider {...settings}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
    </div>
  );
}

We used the Slider component to add some slides to our app.

The settings object has the props that we pass in to configure the carousel.

dots lets us choose whether to show the dots for navigation.

infinite sets whether it goes back to the first slide after the last one is reached.

speed is the speed of the slide.

slidesToShow is the number of slides to show at once.

slidesToScroll is the number of slides that we scroll through when we navigate.

There are many other props for styling the dots, slides, and many other parts of the carousel.

Conclusion

The react-virtualized package lets us create a virtual scroll list, table, or masonry grid.

react-icons lets us add icons from many sources.

react-slick is a library to let us add carousels to our app.