Top React Libraries — Scrolling and Menus

Photo by Hermes Rivera on Unsplash

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.