Top React Libraries — Scrolling and Menus

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 Scroll

The React Scroll library lets us animate vertical scrolling.

To install it, we run:

npm i react-scroll

Then we can use it by writing:

import React from "react";
import { animateScroll as scroll } from "react-scroll";

export default function App() {
  const scrollToTop = () => {
    scroll.scrollToTop();
  };

  const scrollToBottom = () => {
    scroll.scrollToBottom();
  };

  return (
    <div>
      <button onClick={scrollToBottom}>scroll to bottom</button>
      {Array(150)
        .fill()
        .map((_, i) => (
          <p>item {i + 1}</p>
        ))}
      <button onClick={scrollToTop}>scroll to top</button>
    </div>
  );
}

We use the scroll object that comes with the package to do the scrolling.

The scrolling will have an animation effect applied to it.

It also comes with a Link component to let us add links for scrolling to an anchor element.

For example, we can write:

import React from "react";
import { Link } from "react-scroll";

export default function App() {
  const handleSetActive = to => {
    console.log(to);
  };

  return (
    <div>
      <Link
        activeClass="active"
        to="item-100"
        spy={true}
        smooth={true}
        offset={50}
        duration={500}
        onSetActive={handleSetActive}
      >
        scroll to item 100
      </Link>
      {Array(150)
        .fill()
        .map((_, i) => (
          <p id={`item-${i + 1}`}>item {i + 1}</p>
        ))}
    </div>
  );
}

to scroll to the item with ID item-100 .

The onSetActive prop has the function that runs when the scrolling is done.

smooth means that the scrolling will have a smooth scrolling effect.

offset has the distance to scroll to once it reached the element.

duration is the length of the scrolling animation.

It comes with many other options for adjusting the scrolling.

rc-menu

rc-menu is a useful React menu component to let us add menu items easily to our app.

We can install it by running:

npm i rc-menu

Then we can use it by writing:

import React from "react";
import Menu, { SubMenu, Item as MenuItem, Divider } from "rc-menu";
import "rc-menu/assets/index.css";

const titleRight = <span>sub menu</span>;
const titleRight1 = <span>sub menu 1</span>;
const titleRight2 = <span>sub menu 2</span>;
const titleRight3 = <span>sub menu 3</span>;

function handleSelect(info) {
  console.log("selected ", info);
}

function handleClick(info) {
  console.log("click ", info);
}

export default function App() {
  return (
    <div>
      <Menu onSelect={handleSelect} defaultActiveFirst onClick={handleClick}>
        <SubMenu title={titleRight} key="1">
          <MenuItem key="1-1">0-1</MenuItem>
          <MenuItem key="1-2">0-2</MenuItem>
        </SubMenu>
        <MenuItem>
          <a href="http://example.com" target="_blank">
            link
          </a>
        </MenuItem>
        <MenuItem key="3">outer</MenuItem>
        <SubMenu title={titleRight1} key="4">
          <MenuItem key="4-1">inner inner</MenuItem>
          <Divider />
          <SubMenu key="4-2" title={titleRight2}>
            <MenuItem key="4-2-1">inner menu</MenuItem>
            <SubMenu title={titleRight3} key="4-2-2">
              <MenuItem key="4-2-2-1">inner inner</MenuItem>
              <MenuItem key="4-2-2-2">inner inner2</MenuItem>
            </SubMenu>
          </SubMenu>
        </SubMenu>
        <MenuItem disabled>disabled</MenuItem>
        <MenuItem key="4-3">another item</MenuItem>
      </Menu>
    </div>
  );
}

We have the Menu , MenuItem , SubMenu and Divider components to build the menu.

Menu is the root menu component.

MenuItem has the menu item components.

SubMenu have the nested menu items.

The title prop has the title of the submenu.

Divider is a menu divider.

It has many other options like transitions, changing the expand and item icons, and more.

react-window

rc-pagination is a component that lets us add a virtualized scroll list to our React app

To add it, we run:

npm i react-window

to install it.

Then we can use it by writing:

import React from "react";
import { FixedSizeList as List } from "react-window";

const Row = ({ index, style }) => <div style={style}>Row {index}</div>;

export default function App() {
  return (
    <div>
      <List height={150} itemCount={1000} itemSize={35} width={300}>
        {Row}
      </List>
    </div>
  );
}

We add the Row component to let us render the row.

style has the position. index has the index of the row.

Then we used the List component to render the Row .

height is the height of the list.

itemCount is the number of items.

itemSize is the size of the row.

width is the width of the row.

We can change the style, make the list have variable size, add scrolling indicators, and more.

Conclusion

React Scroll is a React library that lets us add smooth scrolling effects to our app.

rc-menu lets us add a menu to our app.

react-window is an easy to use virtualized scroll list library.