Top React Libraries — Scrolling and Menus

Image for post
Image for post
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:

Then we can use it by writing:

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:

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:

Then we can use it by writing:

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:

to install it.

Then we can use it by writing:

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.

Image for post
Image for post
Photo by Alina Chernysheva on Unsplash

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

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