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 = () => {
const scrollToBottom = () => {
return (
<button onClick={scrollToBottom}>scroll to bottom</button>
.map((_, i) => (
<p>item {i + 1}</p>
<button onClick={scrollToTop}>scroll to top</button>

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 => {
return (
scroll to item 100
.map((_, i) => (
<p id={`item-${i + 1}`}>item {i + 1}</p>

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 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 (
<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>
<a href="" target="_blank">
<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>
<MenuItem disabled>disabled</MenuItem>
<MenuItem key="4-3">another item</MenuItem>

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.


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 (
<List height={150} itemCount={1000} itemSize={35} width={300}>

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.

Photo by Alina Chernysheva on Unsplash


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.

Web developer. Subscribe to my email list now at Email me at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store